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.

Scroll-to-top-button

 
 

Update on 3/30/14

If you’re using WordPress you can now download my WordPress plugin which is built on these techniques.

50 comments on “Adding a Scroll to Top Button to a Website

  1. Rene en Willem says:

    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.

  2. Bob Arctor says:

    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.

    1. Sagy says:

      Above code is not working on my server. but it works in locally what i do?

  3. Joe Sexton says:

    Good catch, I’ve updated the code snippets above to include the correct CSS class. Thanks!

  4. SHAD ADONIS says:

    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

  5. Michael B says:

    Thanks for taking the time to write this, I found it really helpful and it worked awesome.

  6. Chris Marisic says:

    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.

    1. Murad Khan says:

      Nice tutorials

  7. Álvaro Flores says:

    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.

  8. Álvaro Flores says:

    Solved! Now it works in Joomla!

    Change class for id in , and

  9. Joseph Pagano says:

    Thanks, Joe. This worked exactly as expected.

  10. El says:

    THANKS! WORKS PERFECTLY!!

  11. Rui says:

    If I want it to stop before it reaches the end of the page, how can I do it?
    Thanks

  12. Rico Leuthold says:

    Awesome – especially the WordPress Plugin – thanks!

  13. costello properties says:

    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 .

  14. Andrea says:

    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..

  15. Tomi says:

    Thanks for the tutorial! Works great 🙂

  16. Skywalker says:

    It works fine on Firefox, Opera, Chrome but it’s not working on Internet Explorer 8. Why?

  17. carlos says:

    thank you. it works perfect

  18. Michael Alder says:

    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

    1. Jörg says:

      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.

  19. Azubuike says:

    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…

  20. Razvan says:

    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!

  21. William Lacey Group says:

    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.

  22. Chaitanya says:

    The button doesn’t shows the arrow and the circle, it only shows the dark grey box. What should i do?

    1. Neil Thompson says:

      Make sure that you are loading the Font Awesome library otherwise the arrow won’t show.

      1. Joseph L says:

        I am not understanding where to load the fontawesome library? I downloaded it and it is several folders in a zip file.
        Thank you.

  23. Neil Thompson says:

    Perfect, just what I was looking for. Thanks for sharing.

    1. Melissa says:

      Heck of a job there, it abtlsuoely helps me out.

  24. PK says:

    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/

  25. Pobier says:

    Nice work! Thx v.much 🙂 Works perfect

  26. deni says:

    It’s easy to use and customize.. thank you so much!

  27. Brian says:

    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.

  28. Tommi says:

    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!

  29. nick says:

    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

  30. Stefano Fallaha says:

    Amazing, thanks

  31. dezorama says:

    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

  32. Nabsta says:

    Awesome, works a treat. Only problem was Revolution Slider in WordPress needs the JS in Body option set to avoid clashing.

  33. Israel says:

    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.

  34. Jahid says:

    Hello,

    Thanks for this help. it’s very helpful.

    Thanks

  35. RY says:

    HELLO.

    WHAT CHANGES DO I REQUIRE TO MAKE IF I WANT TO USE MY OWN IMAGE AS BUTTON?

  36. Gengjun Wu says:

    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

  37. Emitjo Lamellenvorhang nach Maß says:

    Many thanks for the very well written explanations. I guess I can manage it to install the button now!

  38. Marlene says:

    Excellent tutorial, thank you!

  39. Madam Mim says:

    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.

  40. Olu says:

    Thanks, worked like a gem!

  41. nikita says:

    Hi thanks for this! It’s working fine but there’s a space now below the footer?

  42. GAC says:

    This is wonderful and simple. Explained well.
    Thank You very much and God Bless You

  43. Sajjad says:

    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)
    })
    })

  44. ranjith says:

    i would like to keep the arrow mark at the center of the page what changes i have to do

Comments are closed.