January 20, 2014 8:23 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

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

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:

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:

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:

All together

Here we create complete procedure with jQuery, CSS and 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:
  • Shahbaz Ahmed Bhatti

    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

    • huzoorbux

      I am glad it helped you 🙂

      • Shahbaz Ahmed Bhatti


  • Giang Nguyễn Ngọc Trường

    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

  • Try it on other browser.

  • Nick Green

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