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

224

मैं किसी आइफ्रेम या पेज के नीचे स्क्रॉल करने के लिए jquery का उपयोग कैसे करूं?

jquery scroll scrollto

— एडम
स्रोत

360

यदि आप एक अच्छा धीमी एनीमेशन स्क्रॉल चाहते हैं, तो इसके साथ किसी भी एंकर के लिए href="#bottom"आपको नीचे स्क्रॉल करना होगा:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

चयनकर्ता को बदलने के लिए स्वतंत्र महसूस करें।

— मार्क उर्सिनो
स्रोत

48

यह फ़ायरफ़ॉक्स 3.5.7 में काम करता है लेकिन क्रोम 4.0.295.0 में नहीं। Chrome में निम्न कार्य करता है: $ ('html, बॉडी')। चेतन ({स्क्रॉलटॉप: $ (डॉक्यूमेंट) .height) ()}, 'slow');

— टॉम

1

@, मैं आपके समाधान और मार्क के बीच अंतर नहीं कर सकता!

— मुहम्मद गेल्बाना

4

@MuhammadGelbana संपादन दिनांक जांचें। ऐसा प्रतीत होता है कि मार्क ने टॉम के फिक्स को शामिल करने के लिए अपने जवाब को अपडेट किया।

— पॉल पार्कर

वास्तव में तत्व की ऊंचाई प्राप्त करने की कोई आवश्यकता नहीं है: stackoverflow.com/a/44578849/1450294

— माइकल शीपर

210

स्क्रॉलटॉप () स्क्रॉल करने योग्य क्षेत्र से दृश्य से छिपाई गई पिक्सेल की संख्या लौटाता है, इसलिए इसे दे रहा है:

$(document).height()

वास्तव में पृष्ठ के निचले भाग का निरीक्षण करेंगे। पृष्ठ के निचले भाग में 'स्टॉप' पर स्क्रॉल करने के लिए, ब्राउज़र विंडो की वर्तमान ऊंचाई को घटाना आवश्यक है। यदि आवश्यक हो तो सहजता का उपयोग करने की अनुमति देगा, इसलिए यह बन जाता है:

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

— टॉम बेट्स
स्रोत

29

यह स्वीकृत उत्तर होना चाहिए, टॉम बिल्कुल सही है, स्वीकृत उत्तर अच्छी तरह से काम नहीं करता है क्योंकि स्क्रॉलिंग सहजता के अंत को संसाधित करने के बजाय अचानक बंद हो जाएगी।

— क्रिश्चियन

33

नोट: easeOutQuintएक प्लगइन की आवश्यकता है, jQuery ही केवल है linearऔर swing।

— newenglander

यार यह अच्छा सामान है! धन्यवाद। यहां तक कि 'सहजता' के बजाय 'स्विंग' के साथ ऐसा करना ध्यान देने योग्य अंतर दिखाता है।

— जेसी हेड

यकीन नहीं है कि यह खराब फॉर्म है, लेकिन मैंने इस उत्तर के लिए एक सूचक जोड़ने के लिए स्वीकृत उत्तर को संपादित किया। यदि यह है, तो कोई इसे वापस कर सकता है।

— xaxxon

यह समाधान केवल तभी काम करता है जब पृष्ठ की मानक मानक मोड में व्याख्या की जाती है। उदाहरण के लिए, यदि आप <!DOCTYPE html>Chrome पर शामिल नहीं होते हैं , तो Chrome विंडो और दस्तावेज़ की ऊंचाई के लिए सटीक समान मान लौटाएगा, जिस स्थिति $(document).height()-$(window).height()में हमेशा वापस आएगा। यहाँ देखें: stackoverflow.com/questions/12103208/…

— VKK

35

उदाहरण के लिए:

$('html, body').scrollTop($(document).height());

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

मुझे लगता है कि काम करने के लिए नहीं मिल सकता है। कुछ भी नहीं करता है।

— एडम

@ jam आप किस संस्करण का उपयोग कर रहे हैं?

— सन्नी बॉय

14

इसके बाद इस धागे ने मेरी विशिष्ट आवश्यकता के लिए मेरे लिए काम नहीं किया (एक विशेष तत्व के अंदर स्क्रॉल करना, मेरे मामले में एक textarea) मैंने इसे महान परे में पाया, जो इस चर्चा को पढ़ने वाले किसी और के लिए उपयोगी साबित हो सकता है:

प्लैनेटक्लॉड पर वैकल्पिक

चूँकि मेरे पास पहले से ही मेरे jQuery ऑब्जेक्ट का एक कैश्ड संस्करण था ( myPanelनीचे दिए गए कोड में jQuery ऑब्जेक्ट है), मैंने अपने ईवेंट हैंडलर में जो कोड जोड़ा था वह बस यही था:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(धन्यवाद बेन)

— ग्रेग पेटिट
स्रोत

1

मेरे लिए एक डिव के साथ काम किया:var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());

— gregn3

क्या आपको वास्तव में गणित करना है? stackoverflow.com/a/44578849/1450294

— माइकल शेपर

4

एक साधारण फ़ंक्शन जो कूदता है (तुरन्त स्क्रॉल करता है) पूरे पृष्ठ के नीचे। यह बिल्ट-इन का उपयोग करता है .scrollTop()। मैंने व्यक्तिगत पृष्ठ तत्वों के साथ काम करने के लिए इसे अनुकूलित करने की कोशिश नहीं की है।

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

— रोरी ओ'केन
स्रोत

2

मुझे पता नहीं क्यों, लेकिन यह मेरे लिए फ़ायरफ़ॉक्स 26.0 पर काम नहीं करता था, और जब यह फ़ंक्शन चलाया जाता था तो शीर्ष पर स्क्रॉल करता था। इस समस्या को हल करके कहा गया था$(document).scrollTop($(document).height());

— जैक

2

यह एक मेरे लिए काम किया:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

— MountainRock
स्रोत

इस सवाल का जवाब नहीं है

— huyz

2

यदि आपको एनीमेशन की परवाह नहीं है, तो आपको तत्व की ऊंचाई प्राप्त करने की आवश्यकता नहीं है। कम से कम सभी ब्राउज़रों में मैंने कोशिश की है, यदि आप scrollTopएक संख्या देते हैं जो अधिकतम से अधिक है, तो यह बस नीचे तक स्क्रॉल करेगा। तो यह संभव सबसे बड़ी संख्या दे:

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

यदि आप स्क्रॉलबार के साथ कुछ तत्व के बजाय पृष्ठ को स्क्रॉल करना चाहते हैं, तो बस myScrollingElement'बॉडी, HTML' के बराबर बनाएं ।

चूंकि मुझे कई स्थानों पर ऐसा करने की आवश्यकता है, इसलिए मैंने इस तरह से इसे और अधिक सुविधाजनक बनाने के लिए एक त्वरित और गंदा jQuery फ़ंक्शन लिखा है:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

तो मैं ऐसा कर सकता हूं जब मैं एक गुच्छा 'सामान संलग्न करता हूं:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

— माइकल शेपर
स्रोत

0

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

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

या

$(window).scrollTop($(document).height());

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

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

0

$('.block').scrollTop($('.block')[0].scrollHeight);

नए संदेश आने पर मैं चैट को स्क्रॉल करने के लिए इस कोड का उपयोग करता हूं।

— Александр Лиссов
स्रोत

कृपया अपने कोड के लिए कुछ स्पष्टीकरण शामिल करें, खासकर जब आप अपने स्वयं के कोड आधार से कॉपी करते हैं, सीएसएस कक्षाओं का उपयोग करते हुए जो अन्य लोगों के लिए प्रासंगिक नहीं हैं;)

— ब्रूनो मोंटेइरो

स्क्रॉल ब्लॉक के साथ कोई भी ब्लॉक लें;) या संपूर्ण दस्तावेज़।

— Александр Лиссов