jQuery स्क्रॉल पृष्ठ के नीचे करने के लिए

196

मेरे पेज लोड होने के बाद। मैं चाहता हूं कि पृष्ठ के निचले भाग में अच्छी तरह से स्क्रॉल करना, जल्दी से एनिमेशन करना, न कि स्नैप / झटका।

क्या मुझे उसके ScrollToलिए एक प्लगइन की आवश्यकता है? या कि jQuery में बनाया गया है कुछ कैसे?

jquery jquery-plugins

— एक प्रशिक्षु
स्रोत

416

आप scrollTopसंपत्ति को एनिमेट करके पृष्ठ को नीचे स्क्रॉल करने के लिए बस चेतन कर सकते हैं, इस तरह से कोई प्लगइन की आवश्यकता नहीं है:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

के बजाय window.onload(जब छवियों को लोड किया जाता है ... जो ऊंचाई पर कब्जा) के उपयोग पर ध्यान देंdocument.ready ।

तकनीकी रूप से सही होने के लिए, आपको खिड़की की ऊंचाई को घटाना होगा, लेकिन उपरोक्त कार्य:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

किसी विशेष आईडी पर स्क्रॉल करने के लिए, इसका उपयोग करें .scrollTop(), जैसे:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

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

2

एक अन्य मुद्दा यह है कि जब ऐसा लगता है, और तब उपयोगकर्ता इसे बंद करने की कोशिश करता है, थोड़ा सा इसे बंद कर दिया जाता है, और एक बहुत ही झटका देने वाला प्रभाव पड़ता है, उपयोगकर्ता को स्क्रॉल करने से रोकता है

— AnApprentice

1

@AnApprentice - ऐसा इसलिए है क्योंकि यह जल्दी होता है (डिफ़ॉल्ट रूप से 400ms), मैं उस मुद्दे को कम करने के लिए बस एक त्वरित स्क्रॉल की सिफारिश करूंगा।

— निक Craver

3

ताला बंद है क्योंकि दूरी बंद है। यह दृश्यमान एनीमेशन के अतीत को एनिमेट कर रहा है।

— योशिय्याह रूडेल

27

@NickCraver - jQuery के नवीनतम संस्करण के साथ .scrollTop () एक विशेष आईडी पर स्क्रॉल करने के लिए काम नहीं कर रहा है; .offset () के साथ। शीर्ष काम करना चाहिए: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);

— पाओलो गिबेलिनी

3

इस उत्तर को संपादित करने की आवश्यकता है। संपत्ति के $(document).height()लिए बहुत अधिक मूल्य scrollTopहै, आप इसे सहजता से देख सकते हैं। मुझे लगता है कि $(document).height() - window.innerHeightठीक होना चाहिए।

— सिल्वन

23

कुछ इस तरह:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);

— जोशिया रुडेल
स्रोत

मैंने .write-comment में लक्ष्य को अपडेट करने की कोशिश की और यह काम नहीं किया। हो सकता है कि क्योंकि यह पृष्ठ में इंजेक्ट किया जा रहा है?

— अपरेंटिस

16

$('html,body').animate({ scrollTop: 9999 }, 'slow');

इस के रूप में सरल, 9999 पृष्ठ की ऊंचाई ... बड़ी रेंज ताकि यह नीचे तक पहुंच सके।

— अलीन रज़वान
स्रोत

1

यह सही नहीं है, जैसा कि कुछ मामलों में, यहां तक कि अगर दुर्लभ है, तो इससे भी लंबे पृष्ठ हो सकते हैं, विशेष रूप से ऐसे पृष्ठ जो असीमित सामग्री को गतिशील रूप से लोड करते हैं। इससे स्क्रॉल बीच का रास्ता बंद हो जाएगा।

— अखिल गुप्ता

13

आप यह कोशिश कर सकते हैं

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});

— सरथ अक
स्रोत

10

$("div").scrollTop(1000);

मेरे लिये कार्य करता है। नीचे तक स्क्रॉल करता है।

— f123
स्रोत

13

यदि आपका पेज 1000px से अधिक लंबा नहीं है।

— Volomike

4

पिछले उत्तरों में वर्णित लिपियाँ, जैसे:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

क्रोम में काम नहीं करेगा और सीएसएस में संपत्ति के मामले में टैग में सफारी में कूद जाएगा । यह पता लगाने में मुझे लगभग एक घंटा लग गया।htmloverflow: auto;

— इलिया रोस्तोवत्सेव
स्रोत

3

'Document.body.clientHeight' का उपयोग करके आप शरीर के तत्वों की देखी गई ऊंचाई प्राप्त कर सकते हैं

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

यह 'विशेष आईडी' पर स्क्रॉल करता है

— Anbu
स्रोत

1

JQuery 3 के लिए, कृपया बदलें

$ (खिड़की)। लोड (फ़ंक्शन) () {$ ("html, बॉडी")। चेतन ({स्क्रॉलटॉप: (दस्तावेज़)। हेड) ()}, 1000);}।

सेवा:

$ (विंडो) .on ("लोड", फंक्शन (e) {$ ("html, बॉडी")। चेतन ({स्क्रॉलटॉप: $ (डॉक्यूमेंट) .height) ()}, 1000);}।

— अदनान ताहिर
स्रोत

1

function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

यह मेरी ओर से समाधान कार्य है और आप पाते हैं, मुझे यकीन है

— रोशन मदुसनका
स्रोत

0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;

— codeskyblue
स्रोत

हालाँकि यह कोड समस्या को हल करने में मदद कर सकता है, लेकिन यह इस बात की व्याख्या नहीं करता कि क्यों और / या यह सवाल का जवाब कैसे देता है। इस अतिरिक्त संदर्भ को प्रदान करने से इसके दीर्घकालिक शैक्षिक मूल्य में काफी सुधार होगा। कृपया स्पष्टीकरण जोड़ने के लिए अपने जवाब को संपादित करें, जिसमें सीमाएं और मान्यताएं शामिल हैं।

— स्पाइट

0

$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

इस समाधान ने मेरे लिए काम किया। यह पेज स्क्रॉल डाउन में तेजी से काम कर रहा है।

— विक्रम वेंकटेश
स्रोत

0

var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

इसलिए जब पेज ओपन होता है तो यह 1 मिलिसेकंड के बाद अपने आप नीचे स्क्रॉल हो जाता है

— WapShivam
स्रोत