JQuery দিয়ে স্ক্রোলটপ অ্যানিমেট করা কি সম্ভব?

226

আমি সহজেই নীচে স্ক্রোল করতে চাই। আমি এটির জন্য কোনও ফাংশন লিখতে চাই না - বিশেষত যদি jQuery এর একটি ইতিমধ্যে থাকে।

javascript jquery

463

আপনি ঠিক এই .animate()জাতীয় scrollTopসম্পত্তি ব্যবহার করতে পারেন :

$("html, body").animate({ scrollTop: "300px" });

— নিক ক্র্যাভার
সূত্র

খুব সুন্দর .. এটির জন্য প্লাগিন ব্যবহার করার দরকার নেই।

— আমোল এম কুলকার্নি

15

আপনার উভয়ের দরকার কেন htmlএবং body? এখানে কিছু অন্তর্দৃষ্টি রয়েছে: স্ট্যাকওভারফ্লো.com / প্রশ্নস / ২২২3636৯০/২ , তবে এটি সম্পূর্ণ উত্তর নয়।

— হারালান ডবরেভ

28

বডি ওয়েবকিট দ্বারা ব্যবহৃত হয়, এইচটিএমএল ফায়ারফক্স ব্যবহার করে।

— জ্যোরি

2

অবগতির জন্য: যদি <html>গেছে overflow-x:hidden;এই সজীব কাজ করবে না। (এর জন্য কাজ করতে পারে না overflow-y:hidden, এবং overflow:hidden, তবে আমি

— পরীক্ষাও করিনি

1

আমি মনে করি bodyএই বছরের শুরুতে ক্রোমে কাজ করেছি , তবে এখন তা হওয়া উচিত html।

— নিক ডেভিস

73

নিকের উত্তর দুর্দান্ত কাজ করে। অ্যানিমেট () কলের অভ্যন্তরে একটি সম্পূর্ণ () ফাংশন নির্দিষ্ট করার সময় সতর্ক থাকুন কারণ আপনার দুটি নির্বাচক (এইচটিএমএল এবং বডি) ঘোষিত হওয়ায় এটি দুবার কার্যকর করা হবে।

$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);

আপনি কীভাবে ডাবল কলব্যাক এড়াতে পারবেন তা এখানে।

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

— কিতা
সূত্র

1

প্রশ্নটি হল, আপনি কেন 'এইচটিএমএল, দেহ' এবং কেবল 'দেহ' সঞ্চার করবেন না?

— লাইয়ার

21

কারণ আপনি কোন ব্রাউজারের উপর নির্ভর করে আপনি হয় বডি বা এইচটিএমএল সঞ্চার করতে পারেন। দুটি অ্যানিমেট করে আপনি আরও ব্রাউজারগুলি কভার করেন।

— বেনিফিট

তবে এক্ষেত্রে এটি কেবল একবার পপআপ হবে, যদি এটি বারবার কল করতে হয় (বাটনে ইভেন্ট ক্লিক করুন) বা আমি কিছু মিস করছি?

— হোগো

হ্যাঁ, এক্ষেত্রে এটি কেবল একবার পপআপ হবে। আপনার যদি বারবার অ্যানিমেট করার প্রয়োজন হয়, আপনি অ্যানিমেট ফাংশনটি সম্পাদন করে এমন কলব্যাক ফাংশনটিতে সম্পূর্ণ কল কলটি পরিবর্তনশীল স্থানীয় করে তুলবেন। এইভাবে আপনি ক্লিক করলেই এটি কেবল একবার পপআপ হবে, তবে আপনি আবার ক্লিক করলে এটি আবার পপআপ হবে (ঠিক একবার)।

— কেতা

ডাবল কলব্যাক ফাংশন ফায়ারিং প্রতিরোধ করতে আপনি ফাংশন কলের die()আগে live()ফাংশন ব্যবহার করতে পারেন । এটি গ্যারান্টি দেয় যে আপনার live()হ্যান্ডলারটি কেবল একবার কল করা হবে।

— লর্ড নাইটন

27

নিকের উত্তর দুর্দান্ত কাজ করে এবং ডিফল্ট সেটিংসটি দুর্দান্ত, তবে আপনি সমস্ত alচ্ছিক সেটিংস সম্পূর্ণ করে স্ক্রোলিংকে আরও পুরোপুরি নিয়ন্ত্রণ করতে পারেন।

এটি এপিআইতে দেখতে কেমন লাগে তা এখানে:

.animate( properties [, duration] [, easing] [, complete] )

সুতরাং আপনি এই জাতীয় কিছু করতে পারেন:

.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

এখানে jQuery। অ্যানিম্যাট ফাংশন এপিআই পৃষ্ঠা: http://api.jquery.com/animate/

— পথাবিষকারক
সূত্র

15

কিতা যেমন উল্লেখ করেছেন যে আপনি যখন 'এইচটিএমএল' এবং 'বডি' উভয়কে সঞ্জীবিত করেন তখন একাধিক কলব্যাক গুলি ছোঁড়াতে সমস্যা রয়েছে। উভয়কে অ্যানিমেটেড করার এবং পরবর্তী কলব্যাকগুলি ব্লক করার পরিবর্তে আমি কিছু প্রাথমিক বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করতে পছন্দ করি এবং কেবলমাত্র একটি একক বস্তুর স্ক্রোলটপ সম্পত্তি অ্যানিমেট করি।

এই অন্যান্য থ্রেডের গৃহীত উত্তরটি আমাদের কোন বস্তুর স্ক্রোলটপ সম্পত্তিটি অ্যানিমেট করার চেষ্টা করা উচিত সে সম্পর্কে কিছুটা অন্তর্দৃষ্টি দেয়: আইই 8-তে পৃষ্ঠা ওয়াইফসেট স্ক্রোলিং এবং অ্যানিমেশন Y

// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

হালনাগাদ - - -

বৈশিষ্ট্য সনাক্তকরণের উপরের প্রচেষ্টা ব্যর্থ হয়েছে। দেখে মনে হচ্ছে ওয়েবকিট টাইপ ব্রাউজারগুলির পৃষ্ঠা হিসাবে এটি করার এক-লাইন উপায় নেই YYffset সম্পত্তি ডক্টাইপ থাকলে সর্বদা শূন্য ফিরে আসে। পরিবর্তে, আমি প্রতিবার অ্যানিমেশন কার্যকর করার জন্য একটি একক কলব্যাক করার প্রতিশ্রুতি ব্যবহার করার উপায় খুঁজে পেয়েছি।

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

— স্টিফেন
সূত্র

1

প্রতিশ্রুতি ব্যবহার () এখানে প্রতিভা।

— অ্যালান বাজনেট

এটির জন্য আরও বেশি পরিমাণের প্রয়োজন। আমি এর আগে কখনও প্রতিশ্রুতি ব্যবহার করতে দেখিনি, এবং এটি এমন কিছু যা আমি প্রতি কয়েক মাস অনুসন্ধান করে শেষ করি। যেমন অ্যালান বলেছিলেন, প্রতিভা।

— টরটিলেমন

14

আমি যা বিশ্বাস করি তা $('html, body')হ্যাকের চেয়ে ভাল সমাধান ।

এটি কোনও ওলাইনার নয়, তবে আমার যে সমস্যাটি ছিল $('html, body')তা হ'ল আপনি যদি $(window).scrollTop()অ্যানিমেশন চলাকালীন লগ করেন তবে আপনি দেখতে পাবেন যে স্থানটি সমস্ত জায়গাতেই ছড়িয়ে পড়ে, কখনও কখনও কয়েকশত পিক্সেল দ্বারা (যদিও আমি এর মতো কিছুই দেখি না) j দৃশ্যমানভাবে ঘটছে)। অনুমানযোগ্য হওয়ার জন্য আমার মানটির প্রয়োজন হয়েছিল, যাতে যদি অটো-স্ক্রোলের সময় ব্যবহারকারী যদি স্ক্রল বারটি ধরে বা মাউসওহেলটি বার বার করে তবে আমি অ্যানিমেশনটি বাতিল করতে পারি।

এখানে একটি ফাংশন সহজেই স্ক্রোলিং এনিমেট করবে:

function animateScrollTop(target, duration) {
    duration = duration || 16;
    var scrollTopProxy = { value: $(window).scrollTop() };
    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target }, 
            { duration: duration, step: function (stepValue) {
                var rounded = Math.round(stepValue);
                $(window).scrollTop(rounded);
            }
        });
    }
}

নীচে একটি আরও জটিল সংস্করণ যা ব্যবহারকারীর মিথস্ক্রিয়াতে অ্যানিমেশনটি বাতিল করে দেবে, পাশাপাশি লক্ষ্য মানটি না পৌঁছানো পর্যন্ত পুনরায় সংশোধন করবে, যা তাত্ক্ষণিকভাবে স্ক্রোলটপ সেট করার চেষ্টা করার সময় কার্যকর (যেমন কেবল কল করা $(window).scrollTop(1000)- আমার অভিজ্ঞতায়, এটি সম্পর্কে কাজ করতে ব্যর্থ হয় 50% সময়।)

function animateScrollTop(target, duration) {
    duration = duration || 16;

    var $window = $(window);
    var scrollTopProxy = { value: $window.scrollTop() };
    var expectedScrollTop = scrollTopProxy.value;

    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target },
            {
                duration: duration,

                step: function (stepValue) {
                    var roundedValue = Math.round(stepValue);
                    if ($window.scrollTop() !== expectedScrollTop) {
                        // The user has tried to scroll the page
                        $(scrollTopProxy).stop();
                    }
                    $window.scrollTop(roundedValue);
                    expectedScrollTop = roundedValue;
                },

                complete: function () {
                    if ($window.scrollTop() != target) {
                        setTimeout(function () {
                            animateScrollTop(target);
                        }, 16);
                    }
                }
            }
        );
    }
}

— জন স্টার দেওয়র
সূত্র

7

আমার অন্যান্য সমস্যাগুলির মধ্যে একটি পৃষ্ঠা রিফ্রেশ করার পরে অ্যানিমেশনটি পৃষ্ঠার শীর্ষ থেকে সর্বদা শুরু হওয়া বিষয়ে আমার সমস্যা ছিল।

আমি সরাসরি সিএসএস অ্যানিমেটেড না window.scrollTo();করে প্রতিটি পদক্ষেপে কল করে এটি ঠিক করেছি:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

এটি ক্রস ব্রাউজার জাভাস্ক্রিপ্ট ব্যবহার করায় htmlবনাম bodyইস্যুটির আশেপাশে এটি পাওয়া যায় ।

আপনি jQuery এর অ্যানিমেট ফাংশনটি সম্পর্কে কী করতে পারেন সে সম্পর্কে আরও তথ্যের জন্য http://james.padolsey.com/javascript/fun-with-jquerys-animate/ এ দেখুন ।

— complistic
সূত্র

5

আপনি নির্দিষ্ট সময়কাল সহ স্ক্রোল পৃষ্ঠার জন্য jQuery অ্যানিমেশন ব্যবহার করতে পারেন:

$("html, body").animate({scrollTop: "1024px"}, 5000);

যেখানে 1024px হ'ল স্ক্রোল অফসেট এবং 5000 মিলিসেকেন্ডে অ্যানিমেশনের সময়কাল।

— আলেসান্দ্রো পিরোভানো
সূত্র

দুর্দান্ত উত্তর! আপনি সময়কাল বিকল্প অন্তর্ভুক্ত খুশি। শুধু যে $("html, body").animate({scrollTop: 1024}, 5000);কাজ করে যোগ করতে চেয়েছিলেন ।

— রায়ান টেলর

4

ব্যবহার করে দেখুন scrollTo প্লাগইন।

— তাতু উলমানেন
সূত্র

দেখা যাচ্ছে যে স্ক্রোলটো সেই সাইটে আর কোনও প্রকল্প নেই।

— জিম

এটি সম্পাদন করার কোডটি এত সহজ। আপনি কেন এক লাইনের কোড দিয়ে কিছু করতে একটি প্লাগিন যুক্ত করবেন?

— গ্যাভিন

4

চার বছর আগে এটি এত সহজ ছিল না .. :)

— তাতু উলমানেন

4

$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $("html, body").animate({scrollTop:"0"},600);
});

— রুবেল হোসেন
সূত্র

1

আপনি যদি পৃষ্ঠার শেষে নীচে যেতে চান (যাতে আপনার নীচে নীচে স্ক্রোল করার দরকার নেই), আপনি ব্যবহার করতে পারেন:

$('body').animate({ scrollTop: $(document).height() });

— ছোট পিঁপড়া
সূত্র

0

আপনি যদি স্ক্রল করার সময় যদি সত্যিই কিছু অ্যানিমেশন যোগ করতে চান তবে আপনি আমার সহজ প্লাগইন ( অ্যানিমিটস্ক্রোল ) ব্যবহার করতে পারেন যা বর্তমানে 30 টিরও বেশি শৈলীর শৈলী সমর্থন করে

— রাম পাত্র
সূত্র

-3

ক্রস ব্রাউজার কোডটি হ'ল:

$(window).scrollTop(300);

এটি অ্যানিমেশন ছাড়াই তবে সর্বত্র কাজ করে

— user2760861
সূত্র

6

আমি "jQuery দিয়ে স্ক্রোলটপ অ্যানিমেট করার জন্য" একটি উপায় খুঁজছিলাম? "অ্যানিমেশন ছাড়াই" এমন একটি উত্তর কোনও উত্তর নয়।

— ব্রায়ান ফিল্ড