Question

我在想，tumblr“滚动到顶部”按钮有多棒。然后我也在想自己Deviantart没有这样的按钮多少钱。现在我知道了，我可以通过按键盘上的“主页”按钮轻松滚动到页面顶部。但是，如果我太忙于滚动怎么办？或者我只是不想对我的键盘大惊小怪？

好吧，我发现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知识非常少，所以欢迎任何想法！

另外，快速免责声明：基本代码不是我的，因此，我不打算分发它。我希望将此代码用于个人用途，仅此一项。

Answer 1

将此代码放在loadButton函数的末尾。它隐藏/显示按钮，具体取决于用户是否滚动超过100px。

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

它不会做任何动画，但为此您可以尝试一些jQuery平滑滚动插件。

滚动到顶部按钮

1 个答案: