Jquery: $(window).scrollTop(), но не $(window).scrollBottom()

Я хочу поместить элемент в нижнюю часть страницы всякий раз, когда пользователь прокручивает страницу. Это похоже на "фиксированное положение", но я не могу использовать "положение: исправлено" css, поскольку многие браузеры моих клиентов не могут это поддерживать.

Я заметил, что jquery может получить текущую верхнюю позицию верхнего окна, но как я могу получить нижнюю часть окна просмотра прокрутки?

Итак, я спрашиваю, как узнать: $(window).scrollBottom()

Ответы

Ответ 1

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

Ответ 2

Я бы сказал, что scrollBottom как прямая противоположность scrollTop должен быть:

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

Ответ 3

В будущем я сделал 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);

Ответ 4

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

Я думаю, что лучше получить нижний прокрутки.

Ответ 5

Это прокрутит до самого верха:

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

Это будет прокрутка до самого низа:

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

.. измените окно на желаемый идентификатор или класс контейнера, если необходимо (в кавычках).

Ответ 6

Вот лучший вариант прокрутки вниз для таблицы сетки, он будет прокручиваться до последней строки таблицы:

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

Ответ 7

Это быстрый взлом: просто присвойте значение прокрутки очень большому числу. Это обеспечит прокрутку страницы донизу. Использование простого javascript:

document.body.scrollTop = 100000;