滾動到頂部按鈕

我在想我自己tumblr「滾動到頂部」按鈕有多棒。然後我還在想，自己有多少錢，Deviantart沒有這樣的按鈕。現在我知道，通過按下鍵盤上的「home」按鈕，我可以輕鬆地滾動到頁面的頂部。但是如果我太忙了，滾動呢？或者我只是不想用我的鍵盤大驚小怪？滾動到頂部按鈕

嗯，我發現一個chrome extension，提供了一個類似的功能，我想要做什麼。這是一個滾動到4Chan的頂部按鈕，但我調整了清單，json使用Deviantart代替。但是，代碼存在問題。

我想要的按鈕只有當用戶在屏幕上向下滾動超過100px時纔會顯示。我也希望有一些類似於tumblr卷軸的動畫滾動，但這不是必需的。

但是它目前的功能是在頁面右上方顯示一個靜態按鈕，當我處於頁面的最底部時，我只能點擊一下。

這裏是main.js代碼：

/* 
* scroll to top button for deviantart 
* 
*/ 


function loadButton() 
{ 
    button = document.createElement("IMG"); 
    button.setAttribute("onclick", "scrollTo(0)"); 
    button.setAttribute("onmouseover", "this.style.opacity = '1'"); 
    button.setAttribute("onmouseout", "this.style.opacity = '0.4'"); 
    button.src = chrome.extension.getURL("images/scroll-to-top.png"); 
    button.style.position = "fixed"; 
    button.style.right = "10px"; 
    button.style.top = "10px"; 
    button.style.width = "75px"; 
    button.style.height = "75px"; 
    button.style.opacity = "0.4"; 
    document.body.appendChild(button); 
} 


loadButton();

我有非常小的JavaScript知識，所以任何想法，歡迎！

此外，快速免責聲明：基本代碼不是我的，因此，我不打算分發它。我正在考慮將此編碼用於個人使用，並且僅限於此。

來源

2014-02-17 benhofb

酷的故事！讓我們知道它是怎麼回事，祝你好運。 –

將此代碼放在您的loadButton函數的末尾。它隱藏/顯示該按鈕取決於用戶是否滾動過去100px。

window.onscroll = function() { 
    if (document.documentElement.scrollTop > 100) { 
     button.style.display = "inline"; 
    } else { 
     button.style.display = "none"; 
    } 
}

它不會做任何動畫，但爲了您可以嘗試一些jQuery平滑滾動插件。

來源

2014-02-17 19:48:25 rvighne

我想你使用了錯誤的「顯示」值。這在任何情況下都不會隱藏按鈕。 – Anonymous

@匿名好的。 – rvighne

謝謝！這隱藏了按鈕！我有一些問題可以點擊按鈕。例如，如果我滾動DA，圖片將覆蓋按鈕並使其不可點擊。另外，如果按鈕後面有任何東西，它也不會被點擊。有什麼辦法可以讓按鈕高於其他任何東西，因此無論背後是什麼，都可以使它始終可點擊嗎？ – benhofb

滾動到頂部按鈕

回答

相關問題