Question

每当用户滚动页面时，我想在页面底部放置一个元素。它就像“固定位置”但我不能使用“position：fixed”css，因为我的许多客户的浏览器都不能支持它。

我注意到jquery可以获取当前视口的顶部位置，但是如何才能获得滚动视口的底部？

所以我问如何知道：$（window）.scrollBottom（）

Answer 1

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

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

Answer 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);

Answer 4

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

我认为最好让底部滚动。

Answer 5

这将滚动到最顶部：

function [Q R] = gramschmidt(A)
    [n n] = size(A);

    for i = 1:n
        R(i,i) = norm( A(:, i) );
        Q(:, i) = A(:, i) / R ( i, i);

        for j = i + 1 : n
            R(i, j) = Q(:, i)' * A(:, j);
            A(:, j) = A(:, j) - Q(:, i) * R(i, j);
        end
    end
end

这将滚动到最底部：

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

..如有必要，将窗口更改为所需的容器ID或类（引号）。

Answer 6

这是滚动到表格网格底部的最佳选项，它将滚动到表格网格的最后一行：

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

Answer 7

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

Answer 8

尝试：

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

Answer 9

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

Answer 10

对于我页面中的项目：

document.getElementById(elementId).scroll(0,
 document.getElementById(elementId).scrollHeight);

function scrollBottum(elementId){
   document.getElementById(elementId).scroll(0, document.getElementById(elementId).scrollHeight);
}

<html><div><button onclick="scrollBottum('myCart')">Click me to scroll</button></div>
<div id="myCart" style="height: 50px; overflow-y: scroll;">
  <div>1: A First ...</div>
  <div>2: B</div>
  <div>3: C</div>
  <div>4: D</div>
  <div>5: E</div>
  <div>6: F</div>
  <div>7: LAST !!</div>
</div>
</html>

Answer 11

这是一个快速入侵：只需将滚动值分配给一个非常大的数字。这将确保页面滚动到底部。使用普通的javascript：

document.body.scrollTop = 100000;

jquery：$（window）.scrollTop（）但没有$（窗口）.scrollBottom（）

11 个答案: