Adding A jQuery “Scroll-To-Top” Button To A Webpage
- by Mark-Anthony
- in Blog Tutorials
- posted December 15, 2013
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 pmHey 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 pmThanks for the feedback Josh! I’ve taken your advice and added cursor:pointer; 🙂
Josh Flowers
December 15, 2013 at 9:49 pmGlad I could help.
Donald
June 6, 2014 at 7:03 pmI 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 amHi 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 amThanks 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 pmThanks 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 amhow can I use this plugin on my big cartel site ?
Mark-Anthony
September 15, 2014 at 4:21 pmYou 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 amHi, 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 pmEmail 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 pmThank 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 pmThanks! 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 amHi! 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 pmYou can float it right or position it to the right-bottom of your page.
Kaori
May 21, 2015 at 12:26 amHey! 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 pmTumblr 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 pmthank you!