Adding a scroll to top button to your website can be a great way to allow your users to navigate, especially if you have long-scrolling pages. A scroll button should be subtle and it has become expected to see one on the lower right of the page. Some sites include the button in the footer while others use fixed positioning to place the button and show/hide the button based on where the user is on the page. This tutorial will cover how to display the scroll button using jQuery when the user scrolls down the page a little. We’ll use an icon font from Font Awesome but you could easily substitute a Bootstrap glyph or any other icon.
Style and Script Libraries
We need to make sure two libraries are present on our page. The first is jQuery, as we’ll be using that to hide/show the button and to scroll the page when the user clicks the button.
If jQuery is not already in use on your site, add the following just before the closing <body> tag of the page.
<!-- ... --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </body> </html>
The next step is to add the icon font library. If you’re not already using Font Awesome, then include the following to the <head> element of your page.
<head> <!-- ... --> <link rel="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" media="screen"> </head>
The HTML Markup
The HTML for the button is pretty straight forward. It may change slightly if you use an icon font, an image, or text. We’ll be using an icon font for this demonstration. Add the anywhere in the <body> element of the page.
<div class="scroll-top-wrapper "> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div>
CSS Styles
The CSS for the button is pretty straight forward as well. The colors, sizes, and other properties can be changed, but the important styles are the position, visibility, and opacity properties. Add the following to the <head> element.
<style>
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}
</style>
The .show class is used to change the visibility of the button, the default style keeps the button hidden from view. There are also transition properties to fade the button in and out when shown. This transition is why we aren’t using display:none; or jQuery.hide() to hide the button.
The Javascript
There are two components that need to be handled by jQuery. The first is to show/hide the button as the user scrolls around the page. The second is to scroll to the top of the page when the user clicks the button. To begin create an empty <script> element right after the jQuery library script at the bottom of the <body> element.
Show and Hide the Button
To show and hide the button we use the jQuery ‘scroll’ event to detect if the user is scrolling. Check the top of the window and detect the offset to the top of the page, if it’s greater then 100 pixels show the button by adding the ‘show’ class to the ‘scroll-top-wrapper’ element. That 100 pixel offset is arbitrary and can be changed to suit your site.
<script>
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
});
</script>
Scroll to Top
The next step is to handle a button click and scroll to the top of the page. To do this we use the jQuery ‘click’ event. The scrollToTop function uses the jQuery animate method to scroll up with animation rather than instantly.
<script>
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>
Thant’s all there is to it, you should be able to load your page and see a button that looks something like this appear.
Update on 3/30/14
If you’re using WordPress you can now download my WordPress plugin which is built on these techniques.
Thanks for the tutorial. Only the .js and html isn’t correct (or the css). The class ‘scroll-back-to-top-wrapper’ in the css isn’t used in the .js or html. There ‘scroll-top-wrapper’ is used. Thanks again.
Just want to second what the other commenter said, hopefully Joe will fix it above.
For those wondering why you might not be getting this to work, change where it says “.scroll-back-to-top-wrapper” in the css to “.scroll-top-wrapper” (4 instances), and it works.
Otherwise, very easy to implement. Thanks Joe for the very concise and simple explanation.
Above code is not working on my server. but it works in locally what i do?
Good catch, I’ve updated the code snippets above to include the correct CSS class. Thanks!
Hey this one is awesome thanks for the update
I have a quick question for you this one is working for my homepage what should i do to include the same in my blog posts your early response would be highly appreciable
Thanks for taking the time to write this, I found it really helpful and it worked awesome.
Hello Joe,
I don’t see any license attribution for the source provided. Would you please confirm it is public domain or link me to the relevant license?
As a side note, the “Post Comment” button is pretty hard to see. The fact it is nearly the exact same color as the text-area above it talking about these HTML tags. Then below the button is Google adds with a giant blue [ > ] button. I nearly clicked the the advertisement instead of post comment (and probably losing my comment). I might recommend swapping the order of these so the button is directly below the text field. Another solution is moving the help about tags above the comment window. This might be a better solution, then users get to see the documentation before they start writing.
Nice tutorials
Thank you for this amazing piece of code. I’ve been trying to get this work in Joomla!, apparently this works but is always visible.
Solved! Now it works in Joomla!
Change class for id in , and
Thanks, Joe. This worked exactly as expected.
THANKS! WORKS PERFECTLY!!
If I want it to stop before it reaches the end of the page, how can I do it?
Thanks
Awesome – especially the WordPress Plugin – thanks!
Hi my family member! I want to say that this post is amazing, great
written and include approximately all vital infos.
I would like to look extra posts like this .
Thanks a lot! It worked pretty well, there’s only one catch, it doesn’t work no mobile, any idea? I guess it’s because of the 100px scroll to top stuff..
Thanks for the tutorial! Works great 🙂
It works fine on Firefox, Opera, Chrome but it’s not working on Internet Explorer 8. Why?
thank you. it works perfect
My button is just a grey square. It appears correctly and dissapears correctly but does not have the white circle and the arrow. And on click it does not take me to the top of the page. Any advice on troubleshooting?
Thanks
I had the same grey square. I downloaded the complete font from “www.fontawesome.io” including the css to the local file structure and referenced it:
instead of the given web-ressource above. And everything worked well.
Hi, I love the tricks here and it looks straight forward, however, how do I add the codes to my WordPress blog and get the back to top button working. I don’t want to use a plugin cos I prefer doing it the code way than having lots of plugins on my site.
Like the first code for “html markup” and those of “Java script”, where will they go into?
I know that of style sheet will go into css. but others is what I don’t know where to add them exactly.
Kindly help me out…
Awseome button, my friend! It was very helpful. I’m having some trouble on Chrome… when I scroll very fast, the button tends appear and disappear very fast..it looks like some kind of lag, if you can imagine.
Any idea how I could fix this?
Thanks!
Excellent tutorial, very easy to get working, I always appreciate people that take the time to help others. Fantastic JQuery plugin. Thank you very much for sharing.
The button doesn’t shows the arrow and the circle, it only shows the dark grey box. What should i do?
Make sure that you are loading the Font Awesome library otherwise the arrow won’t show.
I am not understanding where to load the fontawesome library? I downloaded it and it is several folders in a zip file.
Thank you.
Perfect, just what I was looking for. Thanks for sharing.
Heck of a job there, it abtlsuoely helps me out.
This is great and useful tip! thank you! I implemented your solution under 2 minutes as opposed to 15 minutes of leading nowhere instructions at http://markgoodyear.com/2013/01/scrollup-jquery-plugin/
Nice work! Thx v.much 🙂 Works perfect
It’s easy to use and customize.. thank you so much!
Very nice tutorial. Thank you for explaining where to put the code.
Everything is working except the arrow is not displaying, only the dark square. I’ve played around with what to put in the <i tag, even gone to font awesome for examples and even tried different icons. Any ideas why they aren't showing? Just fyi, my website is not published yet so I have no way to show you other than a screenshot or other means. Thanks to anyone that can help, the scrolling works perfect.
Wow excellent!
Thanks a lot for a lightweight piece of code which is very simple to integrate – even if you are not using already font-awesome or jquery!
Hi, nice tutorial, I’ve wrapped the code in an Angular.js directive and I’ve made a gist here: https://gist.github.com/nvurgaft/309adde407e6dc8f520b
Amazing, thanks
hi thank you for this
just one query…. my button appears on the bottom left of the page
how can i have it appear on the bottom right of the page?
please do advise
thanks
Awesome, works a treat. Only problem was Revolution Slider in WordPress needs the JS in Body option set to avoid clashing.
Creating ontologies can be supported using different techniques and some common tools.
With the use of CMS platforms such as Word – Press that have built-in features for responsive designs, developers use the “one size will fit all” technique for responsive website
designing. Responsive design is a next big thing in web
designing; it has become a necessity and is here to
stay.
Hello,
Thanks for this help. it’s very helpful.
Thanks
HELLO.
WHAT CHANGES DO I REQUIRE TO MAKE IF I WANT TO USE MY OWN IMAGE AS BUTTON?
Hi Joe,
Thanks for sharing this awesome plugin, I would like to make a vQmod extension for Opencart Ecommerce platform for free. May I use your code? I will acknowledge you as the original author. Cheers.
GJ.VVU
Many thanks for the very well written explanations. I guess I can manage it to install the button now!
Excellent tutorial, thank you!
Just wanted to say “Thank you very much!”. Thanks for all your hard work, and in sharing this code. I didn’t understand any of it, but I just copied all the codes into my blog and it works perfectly.
Thanks, worked like a gem!
Hi thanks for this! It’s working fine but there’s a space now below the footer?
This is wonderful and simple. Explained well.
Thank You very much and God Bless You
Hi great and helpful tutorial. I am using this , I think this is also simple
$(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(“.scrool-top”);
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass(“scrool-is-visible”) : s.removeClass(“scrool-is-visible scrool-fade-out”), e(this).scrollTop() > t && s.addClass(“scrool-fade-out”)
}), s.on(“click”, function(a) {
a.preventDefault(), e(“body,html”).animate({
scrollTop: 0
}, l)
})
})
i would like to keep the arrow mark at the center of the page what changes i have to do