滚动到顶部按钮，只有当您到达页面末尾时才会出现

我认为这很容易实现，但我无法找到如何 - 找不到太多关于它的纪录片。滚动到顶部按钮，只有当您到达页面末尾时才会出现

我讨厌那些在你已经滚动了300px后出现的'scroll to top'按钮。就像我懒惰地滚动到自己的顶部。为此，我想有一个滚动到顶部的按钮，只有当你到达的页面（减去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(); 
};

来源

2015-07-19 Sander Schaeffer

那么，这是什么问题？ – Gianmarco

难道你不能只是绝对地位于身体的底部在CSS？ –

你可以，但它应该与你一起滚动，当你达到'几乎在页面的底部'。因此，固定位置不是一种选择。 –

自己修复它。很简单，说实话。

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

来源

2015-07-19 22:47:04

滚动到顶部按钮，只有当您到达页面末尾时才会出现

回答

相关问题