February 25, 2024 5:04 am

How to create dynamic and animated scroll to top with jQuery

In this tutorial I am going to show you how to add a scroll to top with dynamic window width when your reach 70% height it will show you an arrow and text “Back to Top”. We created this option with jQuery scroll event sent when your scroll position changes up and down, on a 70% scroll down it will fade arrow up box when you click on that arrow it take you to the top.

How to create dynamic and animated scroll to top with jQuery

[wpdm_file id=63]DEMO

HTML used in this scroll page to show back to top.

<body id="top">
<div class="container"> 

<!-- Your Content goes Here -->

<!-- Go to top button -->
<p id="back-top">
   <a href="#top"><span></span>Back to Top</a>
</p>

</div>
</body>

Here you can add your content and it will show you Back to Top button when you reach 70% of the page width.

jQuery required to measure 70% page width:

var height  = $( document ).height(); // returns height of HTML document
var percent = 70;
var scroll  = (height/100)*percent;

On page ready it will calculate the height of document on page ready and calculate its 70% and assign to scroll. This is the main reason this scroll to top called dynamic every time we calculate actual window size and set the 70% height and pass to scroll function to show to top button.

Now rest of jQuery for other navigation:

$(document).ready(function(){
var height = $( document ).height(); // returns height of HTML document
var scroll = (height/100)*70;

    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > scroll) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 700);
            return false;
        });
    });

});

This jQuery called every time when we scroll up or down browser window and calculate width and show Back to top button if you reaches 70%.

CSS we used to create this buttons style:

#back-top {
    position: fixed;
    bottom: 95px;
    margin-left: -150px;
}
#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}

#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(upArrow.png) no-repeat center center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}

All together

Here we create complete procedure with jQuery, CSS and HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>jQuery scroll to top animation | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      img {border-width: 0}
      * {font-family:'Lucida Grande', sans-serif;}
    </style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script>
$(document).ready(function(){
var height = $( document ).height(); // returns height of HTML document
var scroll = (height/100)*70;
    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > scroll) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});
</script>
<style type="text/css">
#back-top {
    position: fixed;
    bottom: 95px;
    margin-left: -150px;
}
#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(upArrow.png) no-repeat center center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}
</style>
</head>
<body id="top">
<h2>jQuery scroll to top animation Example.&nbsp;&nbsp;&nbsp;=> <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>

<!-- Your Content goes Here -->

<!-- Go to top button -->
<p id="back-top">
    <a href="#top"><span></span>Back to Top</a>
</p>
</body>
</html>

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

6 responses to “How to create dynamic and animated scroll to top with jQuery”

  1. Shahbaz Ahmed Bhatti says:

    Bux Bhai , SO Many Thanks, i got the keyword name (Dynamic Scroll top Jquey) Many Thanks for this tutorial. SO Many Thanks of Php Gang Team

  2. Giang Nguyễn Ngọc Trường says:

    I know many libraries can solve this. But i never look up the source code. With this example i get to know more a bout jquery scroll. Thank you

  3. Huzoor Bux says:

    Try it on other browser.

  4. Nick Green says:

    Works on Firefox but only after all the adds have loaded, doesn’t work on Safari, works on edge, works on Opera

Leave a Reply

Your email address will not be published. Required fields are marked *