How To Make a Cool Animated Scroll-to-Top Button — Anyday
Skip to main content
Idea by Sam Kim

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 2021!

In this post, I’ll cover how we went about creating our animated scroll-to-top button the one you see exactly here on this post.

This guide will require a bit of background knowledge in HTML, CSS and Javascript.

Let’s get started!

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 someting 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. Make sure you subscribe to our newsletter for tips and tricks that we personally use on our projects!

Go Up