滚动到顶部按钮

我在想我自己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

滚动到顶部按钮

回答

相关问题