Website Things

Back to Top Button

Posted on Saturday, December 05, 2015

This is abit of code I try to include in all my websites because it helps users with navigating the website. This is a simple button the shows when the users scrolls the page past a certain point and hides when at the top of the page. 

 

Add this html to the footer of your website.

 

HTML
Back to Top	

Jquery

	var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });
    
    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });