JavaScript Scroll to Top with Animation

JavaScript Scroll to Top with Animation
Code Snippet:Scroll To top arrow
Author: gtkumar2020
Published: May 12, 2024
Last Updated: May 12, 2024
Downloads: 70
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code snippet helps you to create a scroll to top button with smooth scroll animation. It works by detecting the user’s scroll position. The button appears when the user scrolls down and disappears when they scroll up. Clicking the button triggers a smooth scroll animation to the top of the page. It helps improve user experience by providing easy navigation.

You can use this code on any webpage to enhance user experience. It helps users easily navigate long pages by providing a quick way to return to the top. This improves usability and encourages visitors to explore more content.

How to Create Scroll To Top Button with Animation using JavaScript

1. Begin by adding the necessary HTML structure to your webpage. Place a button element where you want the scroll-to-top button to appear. Give it a class name, such as “back-to-top”, for easy styling and targeting in JavaScript.

<div class="contentDiv" id="content">

<button class="back-to-top" type="button"></button>
</div>

2. Style the button to your liking using CSS. You can customize its appearance, position, and animation.

.contentDiv{
  width: 300px;
  height:1200px;
  background-color: #ff0000;
}

button.back-to-top{
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
	height: 0px;
  width: 0px;
  overflow: hidden;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
  color: transparent;
	clear: both;
  visibility: hidden;
  position: fixed;
  cursor: pointer;
  display: block;
  border: none;
  right: 50px;
	bottom: 75px;
  font-size: 0px;
  outline: 0 !important;
  z-index: 99;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus,{
  outline: 0 !important;
}
button.back-to-top::before,
button.back-to-top::after {
  content: "";
    display: block;
    vertical-align: middle;
    border-bottom: solid 10px #EA5D5F;
    border-left: solid 10px transparent;
    line-height: 0;
    border-right: solid 10px transparent;
    height: 0;
    margin: 18px auto 0;
    width: 0;
  border-radius:20px;
  visibility: hidden;
}
button.back-to-top.show::after,
button.back-to-top.show::before{
  visibility: visible;
}
button.back-to-top::after {
  border-bottom-color:#fff;
      position: relative;
  top:-24px;
}
button.back-to-top.show {
  display: block;
  background: #fff;
  color: #00ab6c;
  font-size: 25px;
  right: 25px;
	bottom: 50px;
  height: 50px;
  width: 50px;
  visibility: visible;
	box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}
button.back-to-top.show:active {
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
}

3. Now, add the JavaScript code to enable the smooth scroll-to-top functionality. This script will show the button when the user scrolls down and smoothly scroll back to the top when clicked.

// Back to top
var amountScrolled = 200;
var amountScrolledNav = 25;

window.addEventListener('scroll', function() {
  if (window.pageYOffset > amountScrolled) {
    document.querySelector('button.back-to-top').classList.add('show');
  } else {
    document.querySelector('button.back-to-top').classList.remove('show');
  }
});

document.querySelector('button.back-to-top').addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

Feel free to adjust the amountScrolled variable to change when the button appears. Additionally, you can modify the CSS to match your website’s design.

That’s all! hopefully, you have successfully created Javascript Scroll To Top With Animation. If you have any questions or suggestions, feel free to comment below.

Leave a Comment