Out of all the free scripts on the web there’s nothing simpler than a scroll-to-top snippet.
This adds a small arrow near the bottom of the page which, when clicked, automatically scrolls the window towards the top of the page. It’s a popular choice with lengthier blog articles and longer landing pages.
If you want your pick of the litter with these scroll-to-top features then you’ll really like this gallery. I’ve hand picked some of my favorites from vanilla JS scripts to jQuery plugins all with the same goal: to get your visitors smoothly back to the top of the page in one click.
1. ScrollUp
First in my list is ScrollUp which comes as a free jQuery plugin. It’s pretty darn simple and can operate with literally one line of code.
You basically just target the $.scrollUp() function and let it run on whatever element should be clicked. This means you’ll typically need to add the small arrow feature into your layout manually.
But if you look into the GitHub docs you’ll find a sample snippet with CSS and JS codes for a pre-built arrow. Easy to setup, easy to customize, and plenty of demo examples to test out.
2. Material ScrollTop
I had never thought of working with material design for this kind of scrolling feature. But clearly someone else has and that gave birth to this awesome Material ScrollTop script.
As you scroll below the main header a small material arrow icon appears. I think you can guess what it does.
What I like most about this script is how it truly replicates the material style.
This should blend into any layout following Google’s material guidelines and it works flawlessly on jQuery.
3. jQuery Scroll Top
If you want to pick apart some code to really see how it works then you’ll love Karen Grigoryan’s scrolling feature.
This does not operate like a plugin but it does run on top of jQuery. It’s also super easy to setup because you can just copy/paste from the CodePen repo.
Note the CSS styles leave a lot to be desired on this one. Although if you’re porting the script into your own page you’ll probably want a blank slate to customize anyway.
4. Return To Top Arrow
Here’s another example from CodePen with a sweet return-to-top arrow animation.
Again this runs on jQuery and once again, the code is commented pretty well. I think anyone could dig into this and pick out a few golden nuggets on their way to building a scrolling arrow.
Plus the actual arrow design on this is really nice. It can work with basically any layout so I give this a big thumbs up for aesthetics.
5. Smooth Scroller
I’m often surprised how much I can find on CodePen with just a few searches. This snippet is perhaps the simplest one I’ve seen yet.
You can delete almost all of the body contents and still keep this working. The arrow icon is positioned fixed so it does work inside the container, but it can also work as fixed in the main page body.
This jQuery code is not so nice to read so you’ll need to know your way through JS before picking it up. Still a great working demo that you can replicate on your own.
6. jQuery & Vanilla JS
Here’s a code snippet that offers the best of both worlds.
With this CodePen demo you’ll find examples of the scroll to top feature running in both vanilla JavaScript and jQuery. Both codes are separated but there aren’t many comments so it’s not easy to pick them apart.
If you don’t know much JavaScript this can be a tough snippet to rework into your site.
But it’s also a great resource for anyone who wants to select between jQuery or plain JS.
7. Pure JavaScript Scroll
The jQuery library has its own scrollTo() function built into the code. But not everyone likes jQuery for every project.
That’s why developer Erick Tatsui created this snippet. It’s a free scrolling function built entirely on vanilla JavaScript.
This way you don’t have to code the entire scroll from scratch if you already have a script file. Just add this function into your site, target the proper arrow element and away we go!
8. Vue BackToTop
Vue.js layouts are often built with components which operate on top of the Vue library. One really cool example is this Vue.js to-top scrolling script.
It works as a native Vue component and shouldn’t interfere with anything else on your page. You can even see a live example to check out how this works in action.
And this even comes with two editable options: the button text and the total pixels required before showing the scroll button.
Maybe not useful for every web developer but certainly a cool feature if you work in Vue.
9. CodyHouse Back To Top
The various CodyHouse tutorials never fail to impress and I’m constantly finding new ones that just rock.
This really nice example of a scrolling arrow lets you easily copy/paste the code into any website.
In fact there’s a pretty clear demo page if you wanna check that out before downloading a copy. Plus the main article page includes a full tutorial explaining how this was built & how you could replicate this on your own.
Biggest problem here is the lack of GitHub or open source support. You have to download the codes to view them in full which isn’t a terrible chore, but may feel backwards considering all the open sourced options on GitHub.
10. fullPage.js
Let’s delve a bit further into custom scrolling features with fullPage.js. This library doesn’t just customize the scroll or force users to jump higher on the page.
Instead this plugin lets you control your page’s layout with custom scrolling locations.
It’s basically a one page scrolling plugin that lets you define single page sections where you can jump between content. It’s got a beautiful design and the scrolling features are super easy to customize.
But I realize this may be overkill for someone who just wants a simple scroll-to-top button.
Still it’s a nice option for devs who are also building single page layouts.
11. dyScrollUpJS
The dyScrollUpJS is one of the simplest JS plugins you’ll find. It was released only a few months back and still gets semi-frequent updates to run on ES6/JS code.
There’s actually a small demo on the documentation page if you keep your eyes on the lower-right corner of the screen.
That page includes a demo plus a sample video, code snippets, and basic documentation to get this up & running on your site. What more could you ask for in a custom browser scrolling plugin?
12. Smooth Scroll
With the Smooth Scroll plugin we’re going back into the jQuery environment. This doesn’t support any vanilla JS option and it’s not something that needs to be updated very often.
So why would you test Smooth Scroll on your website?
Because it’s the lightest option I’ve seen running on jQuery. This basically runs on a single line of code and doesn’t have many custom options(as if many are required).
Everything you need to know is right on the GitHub page including download links for the main source code. Just grab a copy, set it up on your site, target your arrow element and let it ride.
It doesn’t get much smoother than this.
13. Simplescrollup
I only recently stumbled onto the Simplescrollup plugin and instantly fell in love with the design.
It’s powered by pure JavaScript so this doesn’t have any dependencies. Not to mention you can also install this plugin through npm so it’s a great tool for web developers who work in the command line.
The idea is pretty simple: everything is controlled through classes on the arrow element. So whenever the user clicks the arrow it’ll run a JS function to bring it all back to the top.
From there your arrow button will change classes to auto-hide from view. Then repeat as needed if the user scrolls back down. Easy peasy!
Have a look at the GitHub repo for codes and for more info on setup.
Wrapping Up
Out of all these scrolling plugins, code snippets & libraries there’s gotta be something that can fit with your site.
I realize that not all developers like jQuery while some swear by it. Some developers want lightweight scripts for performance, others want lots of features and a nice design out of the box.
No option is inherently right or wrong. Just different features for different developers so find whatever works best for you and get it running.
And if you’re looking for more free JavaScript snippets have a look at our top 10 list of the best time-saving JS codes for web developers.
