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을 scrollTop과 같은 방식으로 사용할 수있는 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);

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

하단 스크롤을 얻는 것이 낫다고 생각합니다.

맨 위로 스크롤됩니다.

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

맨 아래로 스크롤됩니다.

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

.. 필요한 경우 창을 원하는 컨테이너 ID 또는 클래스로 변경합니다 (따옴표로 묶음).

다음은 테이블 그리드의 맨 아래로 스크롤하는 가장 좋은 옵션이며 테이블 그리드의 마지막 행으로 스크롤됩니다.

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

시험:

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

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

이것은 빠른 해킹입니다. 스크롤 값을 매우 큰 숫자에 할당하기 만하면됩니다. 이렇게하면 페이지가 맨 아래로 스크롤됩니다. 일반 자바 스크립트 사용 :

document.body.scrollTop = 100000;