One of the most common elements, that a lot of websites use to help users get back to the navigation menu without having to continuously scroll, is a “back to top” button. Most websites, especially those that contain a lot of content and vertical space, usually have a “back to top” button floating near the bottom-right or bottom-left hand corner of the browser window. As of now, even this current blog page has a “back to top” button located on the bottom right hand corner of the screen.
In this tutorial, I’ll teach you how to create a simple “back to top” button using HTML, CSS, and a simple jQuery script.
First, let’s start by creating the HTML page from where we’ll be able to place our “back to top” button in. We’ll also place some (Lorem ipsum)content in there in order to see how the page will scroll so that we can effectively use our “back to top” button.
HTML
[HTML]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width; maximum-scale=1; user-scalable=no” />
<title>How To Create a Back To Top Button Using HTML, CSS, and jQuery</title>
<link type=”text/css” rel=”stylesheet” href=”css/style.css” />
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script type=”text/javascript” src=”js/backtotop.js”></script>
</head>
<body>
<div class=”mainContent”>
<h1>How To Create a Back To Top Button Using HTML, CSS, and jQuery</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis mauris nec pretium lacinia. Aliquam risus lectus, faucibus eu nisi id, hendrerit bibendum turpis. Curabitur non odio lorem. Mauris et metus hendrerit, pulvinar nunc sit amet, gravida neque. Donec dictum eleifend tempus. Maecenas eu magna sit amet urna ullamcorper gravida in at ligula. Nunc ut justo non magna viverra placerat et nec est. </p>
<p>In et ligula lobortis, condimentum urna ac, ultricies magna. Etiam diam massa, semper eget scelerisque nec, tempor vitae sapien. Nunc consequat lectus id venenatis pulvinar. Donec id magna id felis vehicula molestie. In luctus sollicitudin elit nec convallis. Sed feugiat diam non fermentum sollicitudin. Donec aliquet purus et blandit malesuada. Aenean non lacus justo. Ut posuere orci sed tortor sodales, et suscipit nulla adipiscing. Integer a dolor velit. </p>
<p>Sed quis dictum ante. Nulla malesuada lacus ac dolor egestas, pellentesque congue enim blandit. Nunc adipiscing massa at turpis rhoncus, aliquam gravida eros hendrerit. Quisque sed sapien odio. Aliquam dictum massa nec consectetur posuere. Nulla at ornare tellus, ut euismod nulla. Ut feugiat erat a pellentesque faucibus. Nulla scelerisque at orci cursus euismod. Aliquam arcu lacus, luctus eu tristique eu, egestas sed nisl. Nullam sollicitudin lacinia lectus, sit amet bibendum lacus. Vivamus et elit quis mauris tincidunt euismod id eu sem. Phasellus iaculis magna nec consequat pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam magna justo, eleifend nec orci non, feugiat bibendum ligula. In eu orci in dolor sodales iaculis porttitor nec odio. </p>
<p>Vivamus pellentesque tincidunt auctor. Aenean congue eros eu dignissim sollicitudin. Phasellus pretium lobortis ligula, quis facilisis ipsum commodo ut. Mauris tempus arcu risus, vel congue erat mattis sed. Nulla molestie suscipit hendrerit. Ut mattis, lectus vel scelerisque ornare, dolor lorem tempus eros, id fringilla nisl nisi sed quam. Vivamus lacinia leo lectus, nec tristique tortor facilisis vitae. In faucibus mattis urna, at accumsan erat vehicula ut. Morbi tempor dolor sit amet molestie luctus. Nam arcu nulla, ullamcorper ac tristique et, suscipit vitae libero. Maecenas hendrerit, arcu ut tristique ultricies, libero felis euismod urna, mattis tincidunt orci diam eu lacus. Aenean at augue vel augue ullamcorper varius. </p>
<p>Nullam fermentum nec augue eu ornare. In dui odio, congue in orci at, viverra tincidunt erat. Vivamus pulvinar nisi et tempor interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec justo dui, dapibus vel euismod vitae, auctor in mauris. Pellentesque sed turpis luctus, dignissim nulla eget, ultrices lectus. Nam ac pretium neque. Mauris placerat velit sed lorem mollis, quis pharetra nibh suscipit. Curabitur massa lacus, convallis eu tellus non, gravida cursus tortor. </p>
<p>Donec sed pellentesque mi. Sed arcu erat, ornare id tempor ut, semper ut eros. Curabitur varius tristique velit. Aenean vestibulum convallis arcu, id faucibus massa mattis at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula varius nibh venenatis convallis. Mauris sed varius metus, et tincidunt sapien. Suspendisse et varius mauris. Donec erat turpis, ullamcorper a nisi a, ullamcorper semper purus. Morbi in neque eget lorem sollicitudin convallis. Vivamus sit amet nisi nec diam commodo facilisis. Sed auctor mauris sed diam pulvinar porta. Duis nibh nibh, sollicitudin vitae tincidunt vehicula, elementum vitae lectus. Nulla sit amet leo ac nisl luctus iaculis. Suspendisse a diam iaculis, aliquam risus quis, viverra ipsum. Ut bibendum non enim imperdiet mattis. </p>
<p> Vestibulum nibh enim, tincidunt porta eleifend vel, eleifend vel metus. Nunc placerat sagittis justo nec ultrices. Aenean dictum odio mattis nisi tempor, et semper est varius. Maecenas orci lectus, vestibulum et massa in, iaculis molestie erat. Praesent sed molestie arcu. Etiam sem quam, condimentum tempor sem venenatis, vulputate sollicitudin enim. Mauris faucibus nulla urna, sed ornare neque pulvinar non. </p>
<p>Aliquam erat volutpat. Nam rhoncus nunc eget nisi varius faucibus in at nisl. Donec tincidunt ligula in dolor vehicula tincidunt. Etiam rutrum facilisis metus vel pretium. Maecenas ac lorem elementum massa auctor vulputate pellentesque non risus. Fusce eget sapien sem. Nullam sit amet eros tincidunt, mollis quam nec, mollis purus. Aenean eu eros scelerisque, hendrerit felis id, fermentum purus. Pellentesque blandit pulvinar suscipit. Aenean dignissim tortor dictum egestas elementum. Ut at iaculis sapien, lobortis gravida lorem. Quisque molestie felis non malesuada gravida. Duis sit amet augue sed elit cursus eleifend vel ut diam. Curabitur sed velit blandit mauris dictum vehicula id ac velit. Fusce risus mi, faucibus at tortor eget, vestibulum fermentum diam. In tincidunt tempor libero eu accumsan. </p>
<p>Curabitur aliquam pellentesque dui. Nunc nunc mi, bibendum a metus vitae, aliquet sollicitudin metus. In ac est in nibh pharetra imperdiet. Etiam congue lacus ultricies massa semper, ut eleifend nulla aliquet. Integer hendrerit tempor dui sed pharetra. Vivamus eu sem ut lacus placerat pretium. Cras ante tortor, egestas commodo dui id, ullamcorper aliquet enim. </p>
</div>
<div class=”backToTop”></div>
</body>
</html>
[/HTML]
Now that we got the content out of the way, let’s go ahead and add some styling.
CSS
[CSS]
/*— Default Styling —*/
*,
*:after,
*:before {
margin:0;
padding:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: ‘Helvetica Neue’, ‘Helvetica’, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0 auto 10px;
}
p {
font-size: 1em;
line-height: 1.8em;
}
.mainContent {
width: 800px;
margin: 40px auto;
}
/*— Back To Top Button —*/
.backToTop {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 10;
background: url(‘../images/arrow.png’) no-repeat 0 0 #333; /* fallback for older browsers */
background: url(‘../images/arrow.png’) no-repeat 0 0 rgba(0,0,0,0.7);
border-radius: 5px;
}
[/CSS]
You’ll notice that I included a background image of an arrow for our “back to top” button and positioned the button to be fixed to the bottom right hand corner of the browser window. I’ve also hidden it by default because we’ll only show it when the user scrolls the window using jQuery.
Here’s a preview of the HTML and CSS code so far (not so pretty, but it get’s the job done)
And finally, let’s go ahead and add the jQuery script that will allow us to show the “back to top” button when the user scrolls the page. We’ll also do a check to see if the user has previously scrolled the page already so that we can show the “back to top” button without having the user scroll the page to show it.
jQuery
[JAVASCRIPT]
$(document).ready(function(){
//on scroll, show the back to top button
$(window).scroll(function(){
if($(window).scrollTop() >= 1){ //if user has scrolled the window
$(‘.backToTop’).fadeIn(500); // show the back to top button
}else { // else if user is at the top already
$(‘.backToTop’).fadeOut(500); //hide the back to top button
}
});
//scroll the page to the top if user clicks on the back to top button
$(‘.backToTop’).click(function(){
$(‘html,body’).animate({ scrollTop: 0 }, ‘slow’);
});
//checks if page was already scrolled down before load
if($(window).scrollTop() >= 1){
$(‘.backToTop’).show(); // show the back to top button
}
});
[/JAVASCRIPT]
You’ll notice, that once you scroll the page, the “back to top” button will show up on the bottom right hand corner of the browser window, and once clicked, will scroll the entire window up to the top.
Conclusion
The “Back to Top” buttons are very useful when used on pages that have a lot of content. It’s also very simple to implement on any page, regardless of page length, to allow users to scroll back to the top without them actually having to scroll on their own.
Hopefully this tutorial has helped you understand how to create your own “back to top” button of your own. Let me know in the comments below if you found this useful or if you’re using this on your own website.
I’ve included the files for you to test out:
how-to-create-a-back-to-top-button-using-html-css-and-jquery