滚动到顶部按钮，仅在您到达页面末尾时出现答案

【问题标题】：Scroll To Top button that only appears when you reached the end of the page滚动到顶部按钮，仅在您到达页面末尾时出现
【发布时间】：2015-07-19 22:12:37
【问题描述】：

我认为这很容易实现，但我不知道怎么做——也找不到太多关于它的纪录片。

我讨厌那些在您仅滚动 300 像素后出现的“滚动到顶部”按钮。就像我懒得滚动到自己的顶部一样。因此，我希望有一个滚动到顶部按钮，该按钮仅在您到达页面底部时出现（减去 100vh（100% 视口高度）。

让我们考虑一下这个按钮叫做.scrollTopButton，它的CSS是opacity: 0，默认是position: fixed。

当您到达页面底部时，如何使按钮出现，负 100vh 并滚动？

我正在考虑用 (window).scrollTop() 比较体高 - 100vh。

var vH = $(window).height(),
    bodyMinus100vh = ($('body').height() - vH);
if (bodyMinus100VH < $(window).scrollTop) {
  $('.scrollTopButton').toggle();
};

【问题讨论】：

那么，问题是什么？
你不能在css中绝对定位在身体的底部吗？
你可以，但是当你到达“几乎页面底部”时，它应该会随着你滚动。因此，固定位置不是一种选择。

标签： scrolltop

【解决方案1】：

自己修好了。老实说，很容易。

$(window).scroll(function () {
    var     vH = $(window).height(),
          bodyHeight = ($(document).height() - (vH * 2)),
        // When you open a page, you already see the website as big
        // as your own screen (viewport). Therefor you need to reduce 
        // the page by two times the viewport
    scrolledPX = $(window).scrollTop();
    if (scrolledPX > bodyHeight) {
        $('.scrollTopButton').css('opacity', '1');
    } else {
        $('.scrollTopButton').css('opacity', '0')
    };
});

【讨论】：