jQuery中“scrollTop”的对面答案

【问题标题】：Opposite of "scrollTop" in jQueryjQuery中“scrollTop”的对面
【发布时间】：2011-05-10 11:43:33
【问题描述】：

jQuery 有一个叫做 scrollTop 的函数，可以用来查找隐藏在当前页面视图上方的像素数。

我不太确定为什么，但没有 scrollBottom 函数返回当前页面视图下方的像素数。

是否有添加此功能的 jQuery 插件？还是需要对窗口/文档高度和 scrollTop 值进行一些复杂的数学运算？

【问题讨论】：

精细数学？不会是[文档高度] - [scrollTop] - [窗口高度]？
@StevePaulo 您可能不应该将文档高度与窗口高度一起使用。这会导致跨浏览器混乱。

标签： jquery

【解决方案1】：

试试这个：

return this[0].scrollHeight - this.scrollTop() - this.height();

【讨论】：

【解决方案2】：

如果你想向下滚动（与“scrollTop”相反），请尝试使用参数的垂直位置。像这样：

$(document).ready(function(){
    $("button").click(function(){
                           //position on pixeles
        $("body").scrollTop(1300);
    });
});

正文的顶部，将是：$("body").scrollTop(0);

【讨论】：

【解决方案3】：

这是我计算元素底部到文档底部距离的方法：

$(document).height() - ($('#element').offset().top + $('#element').height());

【讨论】：

【解决方案4】：

当传递一个负值时，scrollTop 的默认行为滚动到 0，所以我做了这个处理 scrollTop 并模拟“scrollDown”的函数。

如果 anchor_pos 是负数（所以它高于我当前的滚动位置），我从当前滚动位置减去它的值（因为它有一个负值，我使用 + 号）

function jumpToAnchor(scrollable_div_selector, anchor_selector)
{
    anchor_pos = $(anchor_selector).position().top;

    //check if negative number
    if (anchor_pos < 0)
    {
        anchor_pos = $(scrollable_div_selector).scrollTop() + anchor_pos; //anchor_pos is negative, so i'm substracting it
    }

    $(scrollable_div_selector).scrollTop(anchor_pos);
}

【讨论】：

【解决方案5】：

function scrollBottom()
{
    return $( window ).scrollTop() + $( window ).height();
}

// example usage
$( '#footer' ).css( 'top', scrollBottom() - $( '#footer' ).height() );

【讨论】：

【解决方案6】：

你可以为此制作一个非常简单的插件：

$.fn.scrollBottom = function() { 
  return $(document).height() - this.scrollTop() - this.height(); 
};

然后在你想要的任何元素上调用它，例如：

$(window).scrollBottom();  //how many pixels below current view
$("#elem").scrollBottom(); //how many pixels below element

【讨论】：

奇怪，在我的情况下 $(window).scrollBottom(); 返回一个负值：它是 -1 * $(window).scrollTop();
我发现了我的问题：我遇到了这个问题：stackoverflow.com/q/12103208/923560。我的 HTML 文件缺少 doctype 声明。解决方案是在 HTML 文件的最顶部添加 <!DOCTYPE html>。

【解决方案7】：

您可以尝试scrollTo 插件并执行以下操作：

$.scrollTo( document.height )

【讨论】：

【解决方案8】：

也许这会帮助how to tell jquery to scroll to bottom，因为真的没有相反的功能。 scrollLeft 的问题也是如此 - 没有 scrollRight

【讨论】：