jQuery .scrolTop (); অ্যানিমেশন

Question

আমি যখন বোতামটি ক্লিক করা হয় তখন পৃষ্ঠায় শীর্ষে স্ক্রোল করতে সেট করি। তবে পৃষ্ঠার শীর্ষটি 0 তে সেট করা আছে কিনা তা দেখার জন্য আমি প্রথমে একটি if স্টেটমেন্ট ব্যবহার করেছি এবং তারপর যদি এটি 0 না হয় তবে পৃষ্ঠায় শীর্ষে স্ক্রোল করতে অ্যানিমেট করব।

var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

জটিল অংশটি এখন পৃষ্ঠায় শীর্ষে স্ক্রোল করার কিছু পরে অ্যানিমেট করছে। সুতরাং আমার পরবর্তী চিন্তা, পৃষ্ঠার অবস্থানটি কী তা সন্ধান করুন। সুতরাং আমি কনসোল লগ ব্যবহার করে।

console.log(top);  // the result was 365

এটি আমাকে ৩5৫ এর ফলাফল দিয়েছে, আমি অনুমান করছি যে শীর্ষে স্ক্রোল করার ঠিক আগে আমি যে অবস্থানের নম্বরটি ছিলাম।

আমার প্রশ্ন হল আমি কীভাবে অবস্থানটি 0 হিসাবে সেট করব, যাতে পৃষ্ঠায় 0 এ এসে একবার চালানো অন্য অ্যানিমেশনটি যুক্ত করতে পারি?

ধন্যবাদ!

Comments

এটি দরকার যে button বোতামগুলির উপর আপনি যে ঘটনাটি জ্বালান সবসময় দৃশ্যমান হয়? যদি না হয় তবে আমার কাছে এমন একটি কোড রয়েছে যার কোনও ধরণের শর্তের দরকার নেই যা আপনার প্রথম শর্তের জন্য সহজ কাজ হতে পারে

— মেকানিক

মিলিসেকেন্ডের আশেপাশে কোট থাকা উচিত নয়। "স্ট্রিং" ডকুমেন্টেশনটি ধীর / দ্রুত

— এমপি্লুংজন

Answer 1

এটি করার জন্য, আপনি অ্যানিমেট কমান্ডের জন্য একটি কলব্যাক ফাংশন সেট করতে পারেন যা স্ক্রোল অ্যানিমেশন শেষ হওয়ার পরে কার্যকর হবে।

উদাহরণ স্বরূপ:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

সেই সতর্কতা কোডটি যেখানে রয়েছে, আপনি আরও অ্যানিমেশনটিতে যুক্ত করতে আরও জাভাস্ক্রিপ্ট চালিয়ে যেতে পারেন।

এছাড়াও, 'সুইং' রয়েছে ইজিং সেট করার জন্য। পরীক্ষা করে দেখুন http://api.jquery.com/animate/ আরও তথ্যের জন্য।

Comments

থমাস ধন্যবাদ, এটাই আমার দরকার ছিল। ক্লাসটি এত তাড়াতাড়ি যুক্ত হওয়ার পরে আমি একটি বিলম্বও যুক্ত করেছি। যদি (শীর্ষ! = 0) so কনসোল.লগ ("লুকানো স্ক্রোল"); বডি.নিমেট ({স্ক্রোলটপ: 0}, '500', 'সুইং', ফাংশন () so কনসোল.লগ ("সমাপ্ত অ্যানিমেটিং"); বামনকোষ.ডেলা (1000) .রেমক্লাস ("স্লাইড");}); }

— জুয়ান ডি দিয়েগো

আমি নিশ্চিত না যে এটির পোস্টটি 4 বছরের পুরানো কারণ, তবে আমি মনে করি jQuery এর নতুন সংস্করণগুলিতে আপনাকে সময়গুলির চারপাশে সেই একক উদ্ধৃতিগুলি সরিয়ে ফেলতে হবে: বডি.নিমেট ({স্ক্রোলটপ: 0}, 500, 'সুইং', ফাংশন () {সতর্কতা ("সমাপ্ত অ্যানিমেটিং");});

— অ্যান্ড্রু

আপনার কলব্যাক দ্বিগুণ কার্যকর করা হবে, উপায় দ্বারা, কারণ আপনি দুটি উপাদান নির্বাচন করেছেন।

— বড় ম্যাকলার্জহিউজ

টমাসের বডি এবং এইচটিএমএল যুক্ত করার জন্য ভাল পয়েন্ট ছিল। কেস 1. ক্রোম পড়ার বডি এবং স্রোলিং, ফায়ারফক্স এটি করার জন্য এইচটিএমএল প্রয়োজন need

— ভয়

কেবলমাত্র চেষ্টা করা হয়েছে - Chrome ('এইচটিএমএল') ক্রোমে কাজ করে না এবং ফায়ারফক্সে body ('বডি') কাজ করে না, সুতরাং h ('এইচটিএমএল, বডি') প্রয়োজন। এবং .stop () কেও কল করা ভাল জিনিস - আমি ক্রোমে দ্রুত কয়েকবার অ্যানিমেটে কল করার চেষ্টা করেছি এবং এর পরে আমি পৃষ্ঠাটি স্ক্রোল করতে পারিনি।

— লেভ লুকুমস্কি

Answer 2

এই কোড ব্যবহার করে দেখুন:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

Comments

$("html")পরিবর্তে ব্যবহার করা উচিত, কারণ আপনার ক্ষেত্রে যদি আপনি কলব্যাক ফাংশন যুক্ত করেন তবে এটি একবার, এইচটিএমএল এবং একবার শরীরের জন্য একবার ডাকা হবে । এবং শরীর ব্যবহার করে কিছু হয় না।

— flawyte

এটি ব্রাউজারের উপর নির্ভর করে বলে মনে হচ্ছে। কিছুতে, $ ('এইচটিএমএল') কিছুই না করতে পারে, সুতরাং আপনার উভয়টি ব্যবহার করা উচিত এবং দুবার কলব্যাক ট্রিগার হওয়া উচিত take

— কমনপাইক

Answer 3

এটা ব্যবহার কর:

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});

Answer 4

এর জন্য আপনি কলব্যাক পদ্ধতি ব্যবহার করতে পারেন

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);

Answer 5

পরিবর্তে এটি চেষ্টা করুন:

var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}

Answer 6

সহজ সমাধান:

আইডি বা NAME দ্বারা যে কোনও উপাদানগুলিতে স্ক্রোলিং:

SmoothScrollTo("#elementId", 1000);

কোড:

function SmoothScrollTo(id_or_Name, timelength){
    var timelength = timelength || 1000;
    $('html, body').animate({
        scrollTop: $(id_or_Name).offset().top-70
    }, timelength, function(){
        window.location.hash = id_or_Name;
    });
}

Comments

' টাইমলেন্থ ' ইতিমধ্যে প্যারামিটার হিসাবে উত্তীর্ণ হয়েছে তাই এটি 'var' দিয়ে ঘোষণা করার দরকার নেই। এই উত্তরের একটি 'সম্পাদনা' সম্ভব ছিল না, কারণ এটি 6 টির চেয়ে কম অক্ষর ছিল! ;-) +1

— অ্যান্টনি ওয়ালশ

পছন্দ করেছেন varবিশ্বব্যাপী একটিকে ওভাররাইট না করার প্রয়োজন (যদি সেই নামের সাথে বৈশ্বিক চলক উপস্থিত থাকে)

— টি.ডুডো

ফেয়ার যথেষ্ট ;-) আমি ব্যবহার করছি টাইপ করা বিষয় এবং জন্য সরাসরি একটি সংখ্যা ক্ষণস্থায়ী একটি প্যারামিটার হিসাবে timelength তাই আমার ক্ষেত্রে সব স্থানীয় সুযোগ। চিয়ার্স!

— অ্যান্টনি ওয়ালশ

Answer 7

ক্লিক ফাংশন সহ কোড ()

    var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

}); 

.toTopক্লিক করা উপাদানগুলির ক্লাস = imgবা হতে পারেa

Answer 8

jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
       alert("Finished animating");
    });

Answer 9

আপনি এটি দেখতে হবে

$(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

বা তাদের চেষ্টা করুন

$(function () {$('a').click(function () {
$('body,html').animate({
    scrollTop: 0
}, 600);
return false;});});

Answer 10

$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);

Answer 11

এটি সিমেট্রিক রাখার জন্য আপনি সিএসএস ক্লাস বা এইচটিএমএল আইডি উভয়ই ব্যবহার করতে পারেন উদাহরণস্বরূপ আমি সবসময় সিএসএস ক্লাস ব্যবহার করি

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">

$(document).ready(function () {
    $('.js--scroll-to-plans').click(function () {
        $('body,html').animate({
            scrollTop: $('.js--section-plans').offset().top
        }, 1000);
        return false;})
});