滚动到顶部按钮

Question

I was thinking to myself how great the tumblr “scroll to top” button was. And then I was also thinking to myself how much it sucked that Deviantart doesn't have a button like that. Now I know, I can easily scroll to the top of the page by pressing the “home” button on my keyboard. But what if I am too busy scrolling? Or I simply do not want to fuss with my keyboard?

Well, I found a chrome extension that offers a similar function to what I want to do. It was a scroll to top button for 4Chan, but I adapted the manifest,json to use Deviantart instead. BUT, there is a problem with the code.

What I want the button to do, is only show up if the user has scrolled down more than 100px on the screen. I also would like there to be some sort of animated scroll, similar to the way tumblr scrolls, but that is not necessary.

But what it currently does, is show a static button at the top right of the page, that I can only click when I am at the bottom most part of the page.

Here is the main.js code:

/*
 * 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();

I have very minimal javascript knowledge, so any thoughts are welcome!

ALSO, A QUICK DISCLAIMER: The base code is not mine, and therefore, I do not intend to distribute it. I am looking to code this for my personal use, and that alone.

Answer 1

Put this code at the end of your loadButton function. It hides/shows the button depending on whether the user has scrolled past 100px.

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

It does not do any animation, but for that you can try some jQuery smooth scrolling plugin.