滾動到頂部按鈕，只有當您到達頁面末尾時纔會出現

我認爲這很容易實現，但我無法找到如何 - 找不到太多關於它的紀錄片。滾動到頂部按鈕，只有當您到達頁面末尾時纔會出現

我討厭那些在你已經滾動了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

滾動到頂部按鈕，只有當您到達頁面末尾時纔會出現

回答

相關問題