Back to Top in Html(Jquery)


HTML wise all we need to do is add a “back to top” link at the bottom of the blog post

Below Jquery code add in your header file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    $(".top").hide();
    var offset = 820;
    var duration = 700;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.top').fadeIn(duration);
        } else {
            jQuery('.top').fadeOut(duration);
        }
    });

    jQuery('.top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Below code add in footer file means end of page:
<a href="#" title="Back to Top" >Back to top</a>
Advertisements