15+ Best jQuery Scroll to Top tutorial & plugin with example

    In this Article we are providing best jQuery Scroll to top plugin & jQuery animate scroll top tutorials with jQuery example and demo.If the webpage is too long then,it’s a good idea to provide viewers with an easy way to quickly/ automatically scroll back to the top of the page.Here these jQuery plugins provides a way to scroll to the top or bottom of your website with a simple click.jQuery animate scroll top also reduce page scrolling time and good impact on visitors.

    1. UItoTop jQuery scroll to top dynamic Plugin

    Inspired by the great idea of David Walsh’s jQuery topLink Plugin, I made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ).
    Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.See jQuery scoll to top plugin example…

    UItoTop jQuery scroll to top dynamic Plugin

    Read More Demo

    2. Scrolling to the Top and Bottom with jQuery

    A way to scroll to the top or bottom of your website with a simple click with jQuery. I have used the jQuery special scroll events from James Padolsey, and some few extra lines of jQuery. There are two buttons with fixed position on the bottom left of the page, each one with the functionality to move either down or up in the page. If you scroll the page, these two buttons will fade out, which gives a nice and smooth effect.See jQuery scroll to top demo…

    Scrolling to the Top and Bottom with jQuery

    Read More Demo

    3. RocketBar – A jQuery And CSS3 Persistent Navigation Menu

    RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.

    RocketBar – A jQuery And CSS3 Persistent Navigation Menu with scroll top

    Read More Demo

    4. jQuery topLink Plugin

    The topLink jQuery plugin developed by David Walsh, allows you to fade in a “to the top” link when the users scrolls down on the page.See jQuery scrolltop demo…

    jQuery topLink Plugin : scroll to top with example

    Read More Demo

    5. jQuery Animated Scroll to Top

    I’m writing a detail tutorial on how to create an jQuery animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.

    jQuery Animated Scroll to Top with example

    Read More Demo

    6. jQuery Scroll to Top Control v1.1

    If your pages are long winded, it’s a good idea to provide viewers with an easy way to quickly/ automatically scroll back to the top of the page. That’s where this script comes in. It displays a stationary control at the lower right corner of the window that when clicked on gently scrolls the page back up to the top with jQuery. And instead of always being visible on the user’s screen, the script lets you specify how far down the page the user is at (in pixels) before revealing the control.See jQuery scroll to top example…

    jQuery Scroll to Top Control with example

    Read More Demo

    7. jQuery Scroll to the top of a webpage

    A simple way to make anchor tags with e.g. href=”#top” scroll to the top of the webpage when clicked using jQuery. Note as per the commentattors you can use the id of an element to scroll to.

    jQuery Scroll to the top of a webpage with example

    Read More Demo

    8. Smooth Page Scroll to Top with jQuery

    If the web page has lots of content, its a good idea to provide visitors with an easy way to quickly scroll to the top of the page. In this tutorial, we will create jQuery smooth page scrolling effect for returning to the top of the page.
    We will create a button at a fixed position on the bottom right of the page, so that we once click it, it scrolls up with an nice animation rether than a page refresh or a straight jump to the top. We will make the button visible only if the page is scrolled down, instead of being always visible.

    Smooth Page jQuery Scroll to Top with example

    Read More Demo

    9. Disappearing “Scroll to top” link with jQuery and CSS

    This tutorial will help you build a jQuery scroll to top link, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery.See jQuery scroll to top demo

    Disappearing “Scroll to top” link with jQuery and CSS

    Read More Demo

    10. jQuery Contained Sticky Scroll Demo

    You can see the effects of this change in the sidebar, which should stick to the top of the page as you scroll down, but which won’t actually scroll out of the main content area. This is achieved using a custom coded jQuery plugin that I created for this exact purpose. I’ve dubbed it the Contained Sticky Scroll plugin, and released it as a freebie.See jQuery scrolltop & bottom example..

    jQuery Contained Sticky Scroll Demo

    Read More Demo

    11. How To Create An Animated Scroll To Top With jQuery

    For websites that have a lot of information on the page you will scroll far down the page to consume the information. Websites like Google+ who have infinite page scroll can be very annoying if you want to go back to the top of the page to click on a link there. You can either refresh the page or move the scroll bar all the way back to the top.In this tutorials we will explain how to create this scroll to top with jQuery.

    How To Create An Animated Scroll To Top With jQuery

    Read More Demo

    12. Animated jQuery “Back to top” plugin

    I wrote this little jQuery plug-in that automatically inserts a sliding “Back to top” button. It slides in view when the page is scrolled down, and slides back out of view when the page is back at the top again.See jQuery back to top demo…

    Animated jQuery "Back to top" plugin with example

    Read More Demo

    13. jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger

    We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.All this feature we will get from jQuery scoll to top.

    jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger

    Read More Demo

    14. Add Simple jQuery Scroll To Top Button To Blogger

    I will give you a tutorial about adding the simple scroll to top button to your blog.Here I have used CSS and jQuery.When any visitor clicks on it the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed,this effect is looks more attractive.Now lets see how to add this button to your blog.

    Add Simple jQuery Scroll To Top Button To Blogger

    Read More Demo

    15. jQuery Scroll to any element to top

    In today’s front-end landscape of responsive, mobile-friendly sites, I’m finding a frequent need to scroll the user (either up or down) to various different elements on the page. This article will show you a simple, lightweight way to do this…
    ‘Back to top’ buttons, ‘Jump to menu’ buttons, ‘Jump to widget’ links… there are now all sorts of situations where you would want to smoothly scroll the user to a certain element on the page. See jQuery scoll to top any element demo…

    jQuery Scroll to any element to top with example

    Read More Demo

    16. jQuery Scroll to Internal Link

    One page scrolling sites have experienced a huge growth in popularity in web design in recent years. Although this type of site isn’t for everyone, it is still useful to know how they work. Today, I will teach you how to create a very simple one page scrolling site using jQuery.

    jQuery Scroll to Internal Link with example

    Read More Demo

    17. jQuery – smooth scroll effect (smooth scrolling)

    jQuery smooth effect of scroll fluid is already built, according to your user settings on some browsers. It is manifested by a smooth scrolling of the webpage when you get off or ride through the mouse wheel, or the keys on your keyboard. You can generate this effect as clicking an anchor using JavaScript.See jQuery scroll top bottom effect demo…

    jQuery - smooth scroll effect (smooth scrolling)

    Read More Demo

    Best jQuery website design gallery

    5 Replies to 15+ Best jQuery Scroll to Top tutorial & plugin with example

    1. Mayank says:

      wow brilliant nice work i really appreciate this. keep it up.

    2. Going to be trying this out in some of my projects.
      Thanks for this list! Great stuff.

      Been looking for a way to transform a sidebar Nav menu -> Sticky top Nav menu
      This is a good starting point.

    3. Anmol says:

      Thanks to give me jQuery topLink Plugin. Its very easy and nice script.

      Thanks again.

    4. Paul says:

      Thanks for including my tutorial in this list.

    Leave a Reply