jquery: $ (Fenster) .scrollTop () aber kein $ (Fenster) .scrollBottom ()

Ich möchte ein Element am Ende der Seite platzieren, wenn der Benutzer die Seite scrollt. Es ist wie "feste Position", aber ich kann "Position: feste" CSS nicht verwenden, da viele Browser meiner Kunden dies nicht unterstützen können.

Ich habe festgestellt, dass jquery die obere Position des aktuellen Ansichtsfensters abrufen kann. Wie kann ich jedoch die untere Position des Bildlauf-Ansichtsfensters ermitteln?

Also frage ich, woher ich weiß: $ (Fenster) .scrollBottom ()

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

Ich würde sagen, dass ein scrollBottom als direktes Gegenteil von scrollTop sein sollte:

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

Hier ist ein kleiner hässlicher Test, der für mich funktioniert:

// 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 //

Für die Zukunft habe ich scrollBottom zu einem jquery-Plugin gemacht, das auf die gleiche Weise wie scrollTop verwendet werden kann (dh Sie können eine Zahl festlegen, und es wird dieser Betrag vom unteren Rand der Seite gescrollt und die Anzahl der Pixel vom unteren Rand zurückgegeben oder geben Sie die Anzahl der Pixel am unteren Rand der Seite zurück, wenn keine Anzahl angegeben ist.)

$.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);

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

Ich denke, es ist besser, die untere Schriftrolle zu bekommen.

Dies wird nach ganz oben scrollen:

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

Dies wird ganz nach unten scrollen:

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

.. Ändern Sie das Fenster bei Bedarf in die gewünschte Container-ID oder Klasse (in Anführungszeichen).

Hier ist die beste Option, um für das Tabellenraster nach unten zu scrollen. Es wird zur letzten Zeile des Tabellenrasters gescrollt:

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

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

Versuchen:

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

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

Dies ist ein schneller Hack: Weisen Sie den Bildlaufwert einfach einer sehr großen Zahl zu. Dadurch wird sichergestellt, dass die Seite nach unten gescrollt wird. Verwenden von einfachem Javascript:

document.body.scrollTop = 100000;