Question

我认为这很容易实现，但我无法找到如何 - 并且无法找到关于它的纪录片。

我讨厌那些＆＃39;滚动到顶部＆＃39;在您仅滚动300px之后出现的按钮。就像我懒得滚到自己的顶端。因此，我想滚动到顶部按钮，只有当你到达页面底部时才会出现（减去100vh（100％视口高度）。

考虑到该按钮被称为.scrollTopButton，它的CSS为opacity: 0，默认情况下为position: fixed。

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

我在考虑将身高减去100vh与（窗口）.scrollTop（）进行比较。

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

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

滚动到顶部按钮仅在您到达页面末尾时显示

1 个答案: