Super simple Scroll to Top of Page script

This little beauty is really simple. It’s a small ‘scroll to top of page’ plug-in-and-go script, I’ve added a little sprinkling of CSS to make it a bit more fancy. It’s pure CSS, no images or background nonsense going on here. I wrote this to be as user and browser friendly as possible.

Like every Scroll To Top of the page jQuery plugin out there, this one does the same. As the viewer scrolls down beyond the fold, a button is activated (appears), the viewer clicks it and the page smoothly scrolls back to the top. The arrow is an HTML character, found over on the very helpful WebsiteBuilders.com.

Try out the demo

Use it for your project, do whatever you like with it, I ain’t precious!

Here’s how it’s done:

The HTML
<a herf="#" class="scroll-top">&#8682;</a>
The CSS
.scroll-top {
    position: fixed;
    display: none;
    bottom: 5%;
    right: 5%;
    height: 50px;
    width: 50px;
    border-radius: 30px;
    border: solid 5px #4F8FC1;
    background: #3E6FA3;
    overflow: hidden;
    color: #91A7CF;
    font-size: 2.0em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
The Script
 // This is the Scroll To Top button and its fade in/ fade out timings
jQuery(document).ready(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) { // button appears after scrolling 100px
            jQuery('.scroll-top').fadeIn(800); // add fade in time
        } else {
            jQuery('.scroll-top').fadeOut(200); // add fade out time
        }
    });
    // This animates the page scrolling and how fast moves
    jQuery('.scroll-top').click(function () {
        jQuery("html, body").animate({
            scrollTop: 0
        }, 300); // add page scrolling speed
        return false;
    });
});