Overview
Websites nowadays are all about ensuring the end-user has the best experience while browsing the content. Designers and developers work countless hours to come up with the most easy-to-use user interfaces by positioning elements in specific places, using specific color tones, shapes and including various features.
A scroll-to-top button is one of these many features that allow users to easily navigate through the website when they reach the bottom of the page.
Like seriously… Who wants to over exercise their index finger scrolling up and down pages? C’mon – it’s the 2020s!
In this post, I’ll cover how to create an animated scroll-to-top button. This guide will require a bit of background knowledge in HTML, CSS and Javascript.
Let’s get started!
The Mini Tutorial
First, let’s create and style our scroll-to-top button.
<div id="scrollToTop"><span>Go Up</span></div>#scrollToTop { position: fixed; bottom: 3rem; right: 3rem; box-shadow: 0 0 14px -5px rgba(0, 0, 0,0.5); border-radius: 100%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;}
The above code will create our scroll-to-top button and position it to the bottom right corner of the screen.
Let’s now hide this button and only show it when the user starts scrolling down the page.
Let’s first hide this button by adding margin-bottom: -12rem; to hide the button. We’ll also add a transition: margin-bottom 0.2s; to ensure that the button fades in/out smoothly.
We can then use Javascript to animate the button by fading it up from the bottom of the screen when the user scrolls down the page, and when the user scrolls up the page, we’ll fade out the button back towards the bottom of the screen.
$(window).on('scroll',function() { if (window.scrollY > (window.outerHeight + (window.outerHeight/2))) { $('#scrollToTop').addClass('active') } else { $('#scrollToTop').removeClass('active') }})
We will also need to create a .active css class as well.
#scrollToTop.active { margin-bottom: 0;}
Let’s setup a trigger so the page animates to the top when the user clicks the button.
$('#scrollToTop').on('click',function() { $("html, body").animate({ scrollTop: 0 }, 500);})
Let’s see what this looks like:
Now that we’ve got our basic scroll-to-top button in place, let’s add a bit of animations to spice things up a little.
Let’s update the button so it spins while scrolling. Clockwise when scrolling down and counter-clockwise when scrolling up. Add the following snippet at the end of the “TRUE” condition within our scroll function.
setTimeout(function() { var theta = ($(window).scrollTop() - (window.outerHeight + (window.outerHeight/2))) / 500; $('#scrollToTop').css({ transform: 'rotate(' + theta + 'rad)' });})
Your updated script should now look like this.
$(window).on('scroll',function() { if (window.scrollY > (window.outerHeight + (window.outerHeight/2))) { $('#scrollToTop').addClass('active') setTimeout(function() { var theta = ($(window).scrollTop() - (window.outerHeight + (window.outerHeight/2))) / 500; $('#scrollToTop').css({ transform: 'rotate(' + theta + 'rad)' }); }) } else { $('#scrollToTop').removeClass('active') }})
And finally, let’s add an infinite spin when you hover over the button.
We create an animation frame called ‘rotate’ which we then use to animate the button infinitely. You can play around with the duration / rotation degree to change the speed!
#scrollToTop:hover { animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear;}@keyframes rotate { to {transform: rotate(2520deg);}}
Your end result should look something like this:
You did it! Your very own animated scroll-to-top button. We created a very simple user friendly scroll-to-top button to allow users to scroll to the top of the page with very simple animations. If you gave this a try, let me know!
.svg)
.svg)
