jquery：$（window）.scrollTop（）、ただし$（window）.scrollBottom（）はありません

ユーザーがページをスクロールするたびに、ページの下部に要素を配置したいと思います。これは「固定位置」のようなものですが、クライアントのブラウザの多くがそれをサポートできないため、「位置：固定」cssを使用できません。

jqueryが現在のビューポートの上部の位置を取得できることに気付きましたが、スクロールビューポートの下部を取得するにはどうすればよいですか？

だから私は知る方法を尋ねています：$（window）.scrollBottom（）

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

scrollTopの正反対としてのscrollBottomは次のようになります。

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

将来的には、scrollBottomをjqueryプラグインにして、scrollTopと同じように使用できるようにしました（つまり、数値を設定すると、ページの下からその量をスクロールし、下からピクセル数を返します。ページの、または、数値が指定されていない場合は、ページの下からピクセル数を返します）

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

I think it is better to get bottom scroll.

This will scroll to the very top:

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

This will scroll to the very bottom:

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

.. change window to your desired container id or class if necessary (in quotes).

Here is the best option scroll to bottom for table grid, it will be scroll to the last row of the table grid :

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

try:

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

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

This is a quick hack: just assign the scroll value to a very large number. This will ensure that the page is scrolled to the bottom. Using plain javascript:

document.body.scrollTop = 100000;