0

No products in the cart.

back to top scroll icon

Adding A jQuery “Scroll-To-Top” Button To A Webpage

When creating a website with lengthy content, such as a blog or e-commerce site, your users may end up having to scroll through your articles and product pages for some time. If your website does not have a fixed or sticky navigation, it can be frustrating for some users to have to scroll all the way back up to the top of your page to access your navigation menu. An alternate way that can help your users quickly go back to the top of the page and get to the navigation menu is to have a floating or fixed “scroll-to-top” or “back-to-top” button appear on the page when the user starts to scroll down your page.

In this tutorial, we will add a scroll-to-top button to a webpage using jQuery.

Try it!
View Demo
 

Let’s Begin!

1. The HTML
First, I created a single HTML document with a few sections to scroll through. I made the height of each section tall enough so that I can test the scroll button for the purpose of this tutorial.

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Smooth Scrolling “Back-To-Top” Button</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style type=”text/css”>@import url(css/reset.css);</style>
</head>

<body>

<section id=”scroll-down”>
<h1>scroll down.</h1>
<img src=”images/scroll-down.png”>
</section>

<section id=”see-it”>
<h1>do you see it?</h1>
<img src=”images/see-it.png”>
</section>

<section id=”try-it”>
<h1>try it!</h1>
</section>

</body>
</html>

2. Installing jQuery
After I set up the HTML, I will add jQuery to the page within the <head> of the document.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>

3. Creating The Button
Next, I will add a <div> for the “scroll-to-top” button that will go at the bottom of the page.

<div class=”scroll-to-top”>
</div>

4. Styling the Button

Before I add the jQuery, I will be styling and positioning the scroll-to-top button in my CSS. Within my CSS, I’ll be positioning the button to the bottom right-hand side of the browser. I’ve created a scroll-to-top icon in Illustrator with a slightly transparent background, for a subtle effect.

<style>
.scroll-to-top {

position: fixed;
background:url(images/scroll-to-top.png) no-repeat;
cursor: pointer;
width:55px;
height: 55px;
bottom: 1em;
padding-right: 1em;
display: none;
z-index: 999;
}

</style>


5. The jQuery
Lastly, I’ll  add the jQuery function that will make the scroll work. The jQuery function is placed within the <head> of the document, before the closing </head> tag.

<script>

jQuery(document).ready(function() {
var offset = 200;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.scroll-to-top’).fadeIn(duration);
} else {
jQuery(‘.scroll-to-top’).fadeOut(duration);
}
});

jQuery(‘.scroll-to-top’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});

</script>
Within the function, I’ll first set the offset value. This determines how far the user will scroll before the scroll-to-top button appears at the bottom of the browser.  The function also gets the current scroll position using scrollTop. If the current scroll position is greater than the offset value I’ve indicated, the scroll-to-top button will display and will also trigger the fadeIn function. If the scroll position is less than the offset, the button will not be visible and will then trigger the fadeOut function. Finally, to make the scroll-to-top button work, I’ll use the animate function when a click event is triggered.

Conclusion

So, there you have it. Using a “scroll-to-top” or “back-to-top” button is an easy way of getting your users/readers back to the top of a webpage without using a fixed navigation.

Try it!
View Demo

Get the code!
Download Source

Comments

  • Josh Flowers

    December 15, 2013 at 3:31 pm

    Hey Mark, good tutorial. One last thing you can add though is a line of css that will turn your cursor into a pointer on hover.

  • Mark-Anthony

    December 15, 2013 at 5:34 pm

    Thanks for the feedback Josh! I’ve taken your advice and added cursor:pointer; 🙂

  • Josh Flowers

    December 15, 2013 at 9:49 pm

    Glad I could help.

  • Donald

    June 6, 2014 at 7:03 pm

    I got the gist of the tutorial but no CSS in the download? (And copying from the website gives curly quotes which takes me an extra brain cell to realise…). I think the CSS you’ve actually used includes display:block and right-positioning and when you throw those in it works, so thank you in the end!

  • Mark-Anthony

    June 7, 2014 at 10:46 am

    Hi Donald,

    I did include the CSS but it was located within the index.html. I have now made a separate CSS file, which can be found in the CSS folder. My apologies. Thank you for the comment and I’m glad this tutorial helped you.

  • Andrew

    July 19, 2014 at 4:19 am

    Thanks for this. Big help! Looking for this function and couldn’t find anywhere but here. One question, what would I need to change to make it a scroll to bottom rather than scroll to top? Many thanks.

  • Mark-Anthony

    July 21, 2014 at 6:22 pm

    Thanks Andrew! Try looking here: http://jsfiddle.net/q6Wsp/6/ You will find a resource for scrolling to the bottom of a page instead of to the top of a page.

  • Federio

    September 8, 2014 at 5:30 am

    how can I use this plugin on my big cartel site ?

  • Mark-Anthony

    September 15, 2014 at 4:21 pm

    You can access your index.html file and your style.css file for your site. Then, add the code that is provided to the appropriate files.

  • Hashir Zahid

    September 27, 2014 at 6:27 am

    Hi, Can you please help me add it to my blog? I cant seem to find out where to put the code, And I really love the design and the scrolling is soo smooth! Please help me…

  • Mark-Anthony

    September 28, 2014 at 8:20 pm

    Email me via my contact form. If you send me the files, I can help you out later in the week.

  • Mark Anthony

    February 12, 2015 at 10:11 pm

    Thank you so much this helped me a lot and it does not conflict with my lightbox…do you have a tutorial on video lightbox?

  • Mark-Anthony

    February 26, 2015 at 12:19 pm

    Thanks! Currently, I don’t have a video tut on Lightbox, but I can put one together for my next vlog post. 🙂

  • Outline

    April 16, 2015 at 8:21 am

    Hi! Thank you so much for this tutorial! I somehow have a little problem… The button appears on the left! Do you know how this can happen? Thank you!

  • Mark-Anthony

    April 20, 2015 at 8:23 pm

    You can float it right or position it to the right-bottom of your page.

  • Kaori

    May 21, 2015 at 12:26 am

    Hey! Thank you for this tutorial, it’s more clear and better than most of the scroll-to-top tutorials I’ve seen so far 😀 But I was wondering if you can do a step-by-step where to put the code this and that, bc I’m new at this coding stuff and I have no idea where exactly to put the codes! And I have a problem finding out where to put the css file code bc I don’t have a {CSS} in my html theme, am I supposed to put it under the tag instead? Btw, I’m going to use the scroll-to-top button in tumblr. I hope you can help! 🙂

  • Mark-Anthony

    May 26, 2015 at 1:58 pm

    Tumblr has a a css file, it should be called “style sheet”. In there you can add the css for the scroll-to-top button and you can also change the graphic for the scroll button. Just make sure to save the image somewhere that will host your graphic. I’m not sure if Tumblr hosts your images or will allow you to upload an image that belongs in your stylesheet.

  • mohamad neiestani

    December 10, 2017 at 12:22 pm

    thank you!

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.