jquery: $ (विंडो) .scrollTop () लेकिन कोई $ (विंडो) .scrollBottom ()

Question

जब भी उपयोगकर्ता पृष्ठ को स्क्रॉल करता है, मैं पृष्ठ के नीचे एक तत्व रखना चाहता हूं। यह "निश्चित स्थिति" जैसा है, लेकिन मैं "स्थिति: निश्चित" का उपयोग नहीं कर सकता, क्योंकि मेरे कई क्लाइंट ब्राउज़र इसका समर्थन नहीं कर सकते।

मैंने देखा कि jquery को वर्तमान व्यूपोर्ट की शीर्ष स्थिति मिल सकती है, लेकिन मैं स्क्रॉल व्यूपोर्ट के निचले हिस्से को कैसे प्राप्त कर सकता हूं?

तो मैं पूछ रहा हूँ कि कैसे पता करें: $ (विंडो) .scrollBottom ()

Answer 1

var scrollBottom = $(window).scrollTop() + $(window).height();

Comments

आपको लगता है कि अगर यह इस रूप में सरल है, कि इसे .scrollBottom () के रूप में मुख्य ढांचे में शामिल किया जा सकता है। अजीब ..

— कर्ट

Topदस्तावेज़ Topसे दृश्यमान विंडो तक स्क्रॉल # ऊर्ध्वाधर पिक्सेल का है Top। स्क्रॉल के ठीक विपरीत के रूप में Top, स्क्रॉल Bottomको दस्तावेज़ से ऊर्ध्वाधर Bottomविंडो के # दृश्यमान विंडो Bottom(यानी अल्फ्रेड के जवाब के नीचे) को मापना चाहिए । क्या इस देता दस्तावेज़ से खड़ी पिक्सेल की # है _top_दिखाई खिड़की करने के लिए Bottom। यह सुनिश्चित करने के लिए उपयोगी है, हालांकि इसे स्क्रॉलबॉटम के विपरीत नहीं कहा जा सकता है (मुझे पता है कि यह एक चिह्नित उत्तर है लेकिन भविष्य के पाठकों के लिए खुद की तरह)

— डीपस्पेस

यदि शीर्ष से दूरी भिन्न हो सकती है तो यह समाधान काम नहीं करेगा। उदाहरण के लिए, यदि मेरे पास एक <div> पेज के नीचे से एक निश्चित दूरी है और पृष्ठ में विस्तार योग्य / बंधने योग्य आइटम हैं, तो यह शरीर की ऊंचाई और इसलिए नीचे से दूरी को बदलने वाला है।

— दुर्घटना स्प्रिंगफील्ड

@crashspringfield वास्तव में यह एक अलग सवाल है। यह सवाल व्यूपोर्ट के निचले हिस्से के पास की चीजों को पेज के नीचे रखने के बारे में है।

— iPherian

Answer 2

मैं यह कहूंगा कि स्क्रॉलटॉप के प्रत्यक्ष विपरीत के रूप में एक स्क्रॉलबॉटम होना चाहिए:

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

यहाँ एक छोटा सा बदसूरत परीक्षण है जो मेरे लिए काम करता है:

// SCROLLTESTER START //
$('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>').insertAfter('body');

$(window).scroll(function () {
  var st = $(window).scrollTop();
  var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

  $('#st').replaceWith('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;">scrollTop: ' + st + '<br>scrollBottom: ' + scrollBottom + '</h1>');
});
// SCROLLTESTER END //

Comments

बिल्कुल, यह वही है जिसकी मुझे तलाश थी ... धन्यवाद!

— ।

Answer 3

भविष्य के लिए, मैंने स्क्रॉलबॉटम को एक jquery प्लगइन में बनाया है, उसी तरह से प्रयोग करने योग्य है जो स्क्रॉलटॉप है (यानी आप एक नंबर सेट कर सकते हैं और यह पेज के नीचे से उस राशि को स्क्रॉल करेगा और नीचे से पिक्सेल की संख्या लौटाएगा। पृष्ठ, या, यदि कोई संख्या प्रदान नहीं की गई है तो पृष्ठ के नीचे से पिक्सेल की संख्या लौटाएं)

$.fn.scrollBottom = function(scroll){
  if(typeof scroll === 'number'){
    window.scrollTo(0,$(document).height() - $(window).height() - scroll);
    return $(document).height() - $(window).height() - scroll;
  } else {
    return $(document).height() - $(window).height() - $(window).scrollTop();
  }
}
//Basic Usage
$(window).scrollBottom(500);

Answer 4

var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

मुझे लगता है कि नीचे स्क्रॉल करना बेहतर है।

Answer 5

यह बहुत ऊपर तक स्क्रॉल करेगा:

$(window).animate({scrollTop: 0});

यह बहुत नीचे तक स्क्रॉल करेगा:

$(window).animate({scrollTop: $(document).height() + $(window).height()});

.. यदि आवश्यक हो तो (उद्धरण में) अपनी इच्छित कंटेनर आईडी या कक्षा में विंडो बदलें।

Comments

एक निश्चित ऊंचाई के नीचे के भाग को कैसे चेतन करें overflow-y: autoताकि यह वास्तव में पाठ के निचले भाग तक स्क्रॉल हो जाए (जो कि div की ऊंचाई से परे फैली हुई है)?

— user1063287

अगर यह किसी और की मदद करता है तो मेरे सवाल का अपडेट करें: मुझे लगता है कि उपयोग की जाने वाली संपत्ति हो सकती है scrollHeight- देखें: stackoverflow.com/q/7381817

— user1063287

Answer 6

यहाँ टेबल ग्रिड के लिए नीचे की ओर सबसे अच्छा विकल्प स्क्रॉल है, यह टेबल ग्रिड की अंतिम पंक्ति तक स्क्रॉल किया जाएगा:

 $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid > table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });

Answer 7

// Back to bottom button
$(window).scroll(function () {
    var scrollBottom = $(this).scrollTop() + $(this).height();
    var scrollTop = $(this).scrollTop();
    var pageHeight = $('html, body').height();//Fixed

    if ($(this).scrollTop() > pageHeight - 700) {
        $('.back-to-bottom').fadeOut('slow');
    } else {
        if ($(this).scrollTop() < 100) {
            $('.back-to-bottom').fadeOut('slow');
        }
        else {
            $('.back-to-bottom').fadeIn('slow');
        }
    }
});
$('.back-to-bottom').click(function () {
    var pageHeight = $('html, body').height();//Fixed
    $('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
    return false;
});

Answer 8

प्रयत्न:

 $(window).scrollTop( $('body').height() );

Answer 9

var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();

Comments

कृपया कोड केवल उत्तर से बचें और कुछ स्पष्टीकरण प्रदान करें।

— मिकेल बी

Answer 10

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

document.body.scrollTop = 100000;

Comments

यह 100000 पिक्सेल से अधिक पृष्ठों पर काम नहीं करेगा। यह काफी धार वाला मामला लग सकता है, हालांकि अंतहीन स्क्रॉलिंग पेज जैसे मामलों में यह असंभव नहीं है। यदि आप वास्तव में jquery के बिना एक समाधान चाहते हैं, तो यह उत्तर एक बेहतर विकल्प हो सकता है।

— लूलाश

फिर, बिंदु के रूप में संभव के रूप में एक नंबर का उपयोग करने के लिए कहना है 99999999999999999999999999999999.

— अनप्लग्ड