Button to Scroll to Top of the Page

Mobile websites all seem to have this button, which appears when you've scrolled down a bit. The button scrolls you back to the top of the page, where most of the menus reside.

To try this out, you need jquery. Also, make a directory called images, and put the image file in there. Save arrow.html, and open it in your browser. The arrow should appear when you've scrolled down a little bit. Click on it, and it'll scroll you to the top of the page.

The code is pretty simple for this bit of UI. The window checks if $(document).scrollTop() exceeds some limit. If it does, it shows the arrow. When the arrow is clicked, we use an easing function to calculate 20 positions for the scroll bar, and use window.setTimeout() to set times to move to scrollbar to each position.

Most of the work is getting the easing function right, and trying out different values until the scrolling looks smooth.

BTW, I tried using the unicode arrows, but positioning it with CSS was just too much work, and I think it wouldn't be crossplatform. So I resorted to using a PNG graphic.

PS - I just found another way to do it that uses a lot less code because it uses the jQuery animate() function. I didn't know you could specify scrollTop as if it were a css property. Lo and behold, it's in the docs. scrollTop and scrollLeft can be used as if they are css.

scrolltop.png1.08 KB
arrow.html11.71 KB