How to make a to-top button with smooth scrolling

Hello! In today’s lesson, we’ll look at how to implement a simple “scroll to top” button using HTML, jQuery, and CSS.

As always, we start with the HTML code. Today’s structure is very basic:

<div class="to-top" data-btn="toTop">
	&#10145;
</div>

Where:
to-top — the class we’ll use to style the button
data-btn="toTop" — a data attribute we’ll use to track scroll and click events (yes, we could use the class instead, but in this case we’ll use the data attribute)

Styling the Scroll-to-Top Button

To style the button, we’ll use the following CSS:

.to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: none;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  line-height: 1.3;
  border: 3px solid #008cba;
  background-color: #00aae3;
  transform: rotate(-90deg);
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.3s;
}
.to-top:hover {
  opacity: 1;
}
.to-top--fixed {
  display: inline-block;
}

By default, the button is hidden and positioned in the bottom right corner:

  position: fixed;
  right: 25px;
  bottom: 25px;
  display: none;

In real use, you’ll probably want to assign a non-zero z-index, depending on other elements on your site.

Other properties like:

  transform: rotate(-90deg);
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.3s;

are more for visual effect than functionality.

On hover, we make the button fully visible:

.to-top:hover {
  opacity: 1;
}

The class:

.to-top--fixed {
  display: inline-block;
}

is used to show the button block.

JavaScript Code for Scroll-to-Top Button

To handle button behavior, we use the following jQuery code:

jQuery(document).ready(function()
{
	jQuery(window).scroll(function()
	{
		var scroll_top = jQuery(window).scrollTop();
		
		if(scroll_top >= 300)
		{
			jQuery('[data-btn="toTop"]').addClass('to-top--fixed');
		}
		else
		{
			jQuery('[data-btn="toTop"]').removeClass('to-top--fixed');
		}
	});
	
	jQuery('[data-btn="toTop"]').on('click', function(e)
	{
		e.preventDefault();
		jQuery('html, body').animate({scrollTop: 0}, 300);
	});
});

Here we’re tracking two events:
1. The window’s scroll event
2. The button’s click event

We check how far the page has been scrolled:

var scroll_top = jQuery(window).scrollTop();

If we’re more than 300px from the top, we add the to-top--fixed class:

jQuery('[data-btn="toTop"]').addClass('to-top--fixed');

Which adds the style display: inline-block; to the button.

Otherwise, we remove that class if the scroll position is less than 300px.

On button click (tracked by the data-btn attribute):

jQuery('[data-btn="toTop"]').on('click', function(e)
{
	e.preventDefault();
	jQuery('html, body').animate({scrollTop: 0}, 300);
});

We smoothly scroll the page to the top:

jQuery('html, body').animate({scrollTop: 0}, 300);

That’s it. You can find the full working example on this page.