I am not a huge fan of scroll to top button, but it is featured on many websites. The idea is to scroll to top of the page when you have a lot of content.
The scroll you will about to implement is be placed at the bottom right of your screen after you scroll 1/3 of your page. Let’s get it started. Firstly, add FontAwesome icons to your page or website . Secondly, place your HTML code at the bottom of your page (footer).
HTML
<div id="to-top"> <i class="fa fa-chevron-up"></i> </div>
CSS
html, body { height: auto; } //VERY IMPORTANT in order to work JS properly #to-top { background-color: #333; position: fixed; bottom: 25px; right: 25px; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: none; } #to-top i { padding: 17px; color: #fff; }
JavaScript
$(document).scroll(function() { var y = $(this).scrollTop(); if (y > $('html').height() / 3) { $('#to-top').fadeIn(); } else { $('#to-top').fadeOut(); } }); $('#to-top').click(function() { $('html,body').animate({ scrollTop: 0 }, 'slow'); return false; });
What do you think? Is there an easier or better way to do it? Share in the comments below.
2 comments on “Simple Scroll To Top Button”
Georgi Dyulgerov
Super tutorial, I needed quick solution to implement and this tutorial did great job for me :))
Alexander Georgiev
Thanks mate! Glad it worked out easily for you :)