क्या jQuery के साथ स्क्रॉलटॉप को चेतन करना संभव है?

226

मैं आसानी से नीचे स्क्रॉल करना चाहता हूं। मैं उसके लिए एक फ़ंक्शन लिखना नहीं चाहता - खासकर अगर jQuery पहले से ही एक है।

javascript jquery

463

तुम बस का उपयोग कर सकते संपत्ति, इस तरह:.animate()scrollTop

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

— निक क्रेवर
स्रोत

बहुत अच्छा .. इसके लिए प्लगइन्स का उपयोग करने की आवश्यकता नहीं है।

— अमोल एम। कुलकर्णी

15

आप की जरूरत दोनों क्यों htmlऔर body? यहाँ कुछ अंतर्दृष्टि है: stackoverflow.com/questions/2123690/… , लेकिन यह पूर्ण उत्तर नहीं है।

— हरलान डोबरेव

28

webkit के द्वारा body का उपयोग किया जाता है, html का उपयोग firefox द्वारा किया जाता है।

— जॉरी

2

FYI करें: अगर <html>है overflow-x:hidden;इस चेतन काम नहीं करेगा। (लिए काम कर सकते नहीं overflow-y:hidden, और overflow:hiddenहै, लेकिन मैं परीक्षण नहीं किया।

— collinhaines

1

मुझे लगता है कि bodyइस साल की शुरुआत में क्रोम में काम किया था, लेकिन अब यह होना है html।

— निक डेविस

73

निक का जवाब बहुत अच्छा काम करता है। चेतन () कॉल के अंदर एक पूर्ण () फ़ंक्शन निर्दिष्ट करते समय सावधान रहें क्योंकि यह दो बार निष्पादित हो जाएगा क्योंकि आपके पास दो चयनकर्ता घोषित किए गए हैं (html और शरीर)।

$("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');
            }
        }
    }
);

— Kita
स्रोत

1

सवाल यह है कि आप 'html, बॉडी' और सिर्फ 'बॉडी' को ही क्यों पसंद करेंगे?

— लिकोर

21

क्योंकि आप किस ब्राउज़र पर निर्भर हैं, आप या तो शरीर या html को चेतन कर सकते हैं। दोनों को एनिमेटेड करके, आप अधिक ब्राउज़रों को कवर करते हैं।

— नेने

लेकिन इस मामले में यह वास्तव में केवल एक बार पॉपअप होगा, भले ही इसे बार-बार कॉल करना पड़े (बटन पर घटना पर क्लिक करें) या क्या मुझे कुछ याद है?

— HoGo

हां, इस मामले में यह केवल एक बार पॉपअप होगा। यदि आपको बार-बार चेतन करने की आवश्यकता है, तो आप कॉलबैक फ़ंक्शन को पूर्ण रूप से परिवर्तनीय स्थानीय बना देंगे जो चेतन फ़ंक्शन को निष्पादित करता है। इस तरह से यह तब भी पॉपअप होगा जब आप क्लिक करेंगे, लेकिन यह फिर से पॉपअप होगा (बस एक बार) जब आप फिर से क्लिक करेंगे।

— किता

फंक्शन कॉल die()से पहले डबल कॉलबैक फंक्शन फायरिंग को रोकने के लिए आप फंक्शन का इस्तेमाल कर सकते हैं live()। यह गारंटी है, कि आपके live()हैंडलर को केवल एक बार बुलाया जाएगा।

— बजे लॉर्ड नाइटन

27

निक का जवाब बहुत अच्छा काम करता है और डिफ़ॉल्ट सेटिंग्स अच्छी हैं, लेकिन आप सभी वैकल्पिक सेटिंग्स को पूरा करके स्क्रॉल को पूरी तरह से नियंत्रित कर सकते हैं।

यहाँ एपीआई में ऐसा दिखता है:

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

तो आप ऐसा कुछ कर सकते हैं:

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

यहाँ jQuery के .animate फ़ंक्शन एपीआई पेज है: http://api.jquery.com/animate/

— सलाई
स्रोत

15

जैसे कि किता ने उल्लेख किया है कि 'html' और 'body' दोनों में चेतन होने पर कई कॉलबैक फायरिंग की समस्या है। दोनों को ऐनिमेट करने और बाद की कॉलबैक को ब्लॉक करने के बजाय, मैं कुछ मूल फीचर डिटेक्शन का उपयोग करना पसंद करता हूं और किसी एक ऑब्जेक्ट के स्क्रॉलटॉप प्रॉपर्टी को ही एनिमेट करता हूं।

इस अन्य सूत्र पर स्वीकृत उत्तर कुछ अंतर्दृष्टि देता है कि हमें किस वस्तु की स्क्रॉलटॉप संपत्ति को चेतन करने की कोशिश करनी चाहिए: IE8 में पेजयोफेससेट स्क्रॉलिंग और एनीमेशन

// 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...
    })
});

अपडेट करें - - -

फ़ीचर डिटेक्शन में उपरोक्त प्रयास विफल हो जाता है। ऐसा लगता है कि वेबकिट प्रकार के ब्राउज़र के रूप में इसे करने का एक-तरफ़ा तरीका नहीं है, पृष्ठ-प्रूफ संपत्ति हमेशा शून्य होती है जब एक सिद्धांत होता है। इसके बजाय, मुझे हर बार एनीमेशन निष्पादित करने के लिए एक कॉलबैक करने के वादे का उपयोग करने का एक तरीका मिला।

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

— स्टीफन
स्रोत

1

यहां वादा () का उपयोग करना प्रतिभाशाली है।

— एलन बाजनीत

इसके लिए अधिक उर्जा की जरूरत है। मैंने पहले कभी भी इसके लिए उपयोग किए गए वादे को नहीं देखा है, और यह कुछ ऐसा है जो मैं हर कुछ महीनों में खोज रहा हूं। जैसा कि एलन ने कहा, प्रतिभा।

— टॉरटिलमैन

14

मुझे लगता है कि मेरा मानना है कि $('html, body')हैक से बेहतर समाधान है ।

यह एक-लाइनर नहीं है, लेकिन मेरे पास जो मुद्दा $('html, body')है वह यह है कि यदि आप $(window).scrollTop()एनीमेशन के दौरान लॉग इन करते हैं, तो आप देखेंगे कि मान पूरे स्थान पर कूदता है, कभी-कभी सैकड़ों पिक्सेल द्वारा (हालांकि मुझे ऐसा कुछ नहीं दिखता है) नेत्रहीन हो रहा है)। मुझे पूर्वानुमानित होने के लिए मूल्य की आवश्यकता थी, ताकि मैं एनीमेशन को रद्द कर सकूं अगर उपयोगकर्ता ने स्क्रॉल बार को पकड़ा या ऑटो-स्क्रॉल के दौरान मूसवेल को घुमाया।

यहाँ एक समारोह आसानी से स्क्रॉल चेतन होगा:

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मुद्दे के आसपास हो जाता है।

अधिक जानकारी के लिए http://james.padolsey.com/javascript/fun-with-jquerys-animate/ पर एक नज़र डालें जो आप jQuery के चेतन फ़ंक्शन के साथ कर सकते हैं।

— complistic
स्रोत

5

आप एक विशिष्ट अवधि के साथ स्क्रॉल पृष्ठ के लिए jQuery के एनीमेशन का उपयोग कर सकते हैं:

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

जहां 1024px स्क्रॉल ऑफसेट है और 5000 मिलीसेकंड में एनिमेशन की अवधि है।

— एलेसेंड्रो पिरोवानो
स्रोत

बहुत बढ़िया जवाब! खुशी है कि आपने अवधि विकल्प को शामिल किया। बस $("html, body").animate({scrollTop: 1024}, 5000);यह जोड़ना चाहता था कि यह भी काम करता है।

— रयान टेलर

4

स्क्रोल्टो प्लगइन का प्रयास करें ।

— तातु उलमन
स्रोत

ऐसा प्रतीत होता है कि स्क्रोल्टो अब उस साइट पर प्रोजेक्ट नहीं है।

— जिम

इसे पूरा करने के लिए कोड इतना सरल है। आप कोड की एक पंक्ति के साथ कुछ करने के लिए एक प्लगइन क्यों जोड़ सकते हैं?

— गाविन

4

चार साल पहले यह इतना आसान नहीं था .. :)

— Tatu Ulmanen

4

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

— रूबेल हुसैन
स्रोत

1

यदि आप पृष्ठ के अंत में नीचे जाना चाहते हैं (तो आपको नीचे स्क्रॉल करने की आवश्यकता नहीं है), आप उपयोग कर सकते हैं:

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

— छोटा चींटी
स्रोत

0

लेकिन अगर आप वास्तव में स्क्रॉल करते समय कुछ एनीमेशन जोड़ना चाहते हैं, तो आप मेरे सरल प्लगइन ( AnimateScroll ) को आज़मा सकते हैं जो वर्तमान में 30 से अधिक सहज शैलियों का समर्थन करता है

— राम पात्रा
स्रोत

-3

पार ब्राउज़र कोड है:

$(window).scrollTop(300);

यह एनीमेशन के बिना है, लेकिन हर जगह काम करता है

— user2760861
स्रोत

6

मैं "jQuery के साथ स्क्रॉल करने के लिए एक रास्ता" के लिए देख रहा था? एक उत्तर जो "बिना एनीमेशन" है, वह उत्तर नहीं है।

— ब्रायन फील्ड