jquery: $(окно).scrollTop() а не $(окно).scrollBottom()

Question

jquery: $(окно).scrollTop() а не $(окно).scrollBottom()

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

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

поэтому я спрашиваю, Как узнать: $(окно).scrollBottom ()

511 8

jQuery javascript

8 ответов:

Comments

Ничего не найдено.

David Tang · Accepted Answer · 2011-01-11 09:47:10

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

Alfred · Accepted Answer · 2011-05-03 17:03:42

Я бы сказал, что 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 //

Zephyr · Accepted Answer · 2015-05-08 18:04:07

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

pb2q · Accepted Answer · 2014-09-02 23:35:38

var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();
Я думаю, что лучше получить нижнюю прокрутку.

snoop_dog · Accepted Answer · 2016-05-03 06:37:11

это будет прокручиваться до самого верха:
$(window).animate({scrollTop: 0});
это будет прокручиваться до самого низа:
$(window).animate({scrollTop: $(document).height() + $(window).height()});
.. при необходимости измените окно на нужный идентификатор контейнера или класс (в кавычках).

SantoshK · Accepted Answer · 2016-06-03 09:54:08

вот лучший вариант прокрутки вниз для таблицы сетки, это будет прокрутка до последней строки таблицы сетки:
 $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid > table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });

Ghebrehiywet · Accepted Answer · 2018-07-13 11:36:11

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

unplugged · Accepted Answer · 2017-06-20 23:10:26

Это быстрый Хак: просто назначьте значение прокрутки на очень большое число. Это будет гарантировать, что страница прокручивается до самого низа. Использование простого javascript:
document.body.scrollTop = 100000;