I will show in this short article how to add in JavaScript “scroll top” button. This is a popular solution used on blogs or websites with “one page” layout – so in situations when web page has a long content, which require a lot of scrolling down, then user has easy option to go smoothly to top of page by using scroll top button.
There are many methods to achieve that, but here we focus on scroll top button build with jQuery.
Table of Contents
Create scroll top button in HTML and CSS
First we need to add HTML code with button, like below. Button code is wrapped with link “a” tag. This is for the accessibility purpose – user using only keyboard must have possibility to press that button too (by clicking ‘Tab’ key). Next we have there div with class “scroll-top-btn” and next is span tag with text. This is also because the accessibility purpose – reader browsers must have some text in link “a” tag to read it for users with eye problems. But text in span is hidden, what you can see further, in CSS code.
<a href="#">
<div class="scroll-top-btn">
<span>Scroll to top</span>
</div>
</a>
Next we need to define a CSS styles for our jQuery scroll to top button. We will not use here images – all shapes will be drawn within CSS. So just copy and paste this CSS code into your code. For that purpose we use a CSS para-element “before”. This scroll to top button will display in fixed position in bottom right corner of the page.
.scroll-top-btn {
position: fixed;
bottom: 50px;
right: 20px;
background: rgba(50,50,50,0.5);
width: 40px;
height: 40px;
border-radius: 5px;
}
.scroll-top-btn span {
visibility: hidden;
}
.scroll-top-btn::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid rgba(255,255,255,0.9);
}Add functionality with JavaScript + jQuery to scroll top button
Next you need to add jQuery to your website and copy and paste from here JavaScript code with “scroll top button” functionality. It is very basic – only 4 lines of code. We need to handle onclick event on our button, prevent the default behavior, and scroll to page top with animation in time of 500 milliseconds. With this very basic JavaScript code, supported with jQuery, our button created above (in HTML and CSS) will scroll user to the top of the page.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script defer>
$(".scroll-top-btn").click(function (e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0}, 500);
});
</script>
This solution will work without any problems in all browsers, event very old like IE 11.
Example of jQuery scroll top button
You can download the demo here: scroll to top button example or check above code on our Gitlab account HERE.
Check the same demo example of scroll top button in frame below. When you click button with triangle in bottom right corner below, it will scroll you to the top of the page (in iframe window below).
With that very minimalist solution of scroll top button you can add to your website or webapp very useful functionality. The biggest advantage of this button is on mobile devices where there is no easy way to scroll fast to the top of the page. Remember that even 80% of traffic on your website can be made from mobile devices (mostly smartphones). With that you will make your final product much more user friendly.
