DEV Community

Cover image for Scroll to the top with JS
Jatin Sharma
Jatin Sharma

Posted on • Edited on

Scroll to the top with JS

You may have seen various types of website in that there is a button that takes you to the top of the page. Have you ever wondered how it actually works? Well, it's not rocket science or something it's very easy to do and after reading this article I am sure your website will have that button too. So without further due, let's get into it.

Preview

preview

Firstly, We need to create a button. For that in your main page or in the body of your HTML create a button with your suitable icon, for instance arrow-up.



  <button class="scroll-button">
    <img src="https://cdn-icons-png.flaticon.com/512/892/892692.png" alt="arrow-up" />
  </button>


Enter fullscreen mode Exit fullscreen mode

Also, you need to make sure that your button is directly inside the body on level one not in the nested divs.

Wrong Place-



<!--WRONG-->
<body>
    <div>
        <div></div>
         ....
         <!--WRONG Place for button-->
         <button></button>
      </div>
</body>


Enter fullscreen mode Exit fullscreen mode

Correct Place-



<!--CORRECT-->
<body>
    <div>
        <div></div> 
         ....
    </div>
    <!--CORRECT Place for button-->
    <button></button> 
</body>


Enter fullscreen mode Exit fullscreen mode


body/
├─ level-one
├─ level-one
├─ level-one/
│  ├─ level-two
│  ├─ level-two/
│  │  ├─ level-three
├─ level-one


Enter fullscreen mode Exit fullscreen mode

The above code explains that how the button should be placed on a level-one.

Now we've created a button we need to style it. You can style, however you want, but there are many things which you should remember, for that look at the following code-




.scroll-button {
  /* position should be fixed so that it sticks to the bottom */
  position: fixed;
  bottom: 5%;
  right: 5%;

  /* removing extra syles outline and border */  
  outline: none;
  border: none;
  cursor: pointer;
  user-select: none;
  border-radius: 100%;  /* making it rounded */

  /* Making it's content center */
  display: grid;
  place-items: center;

  /* Inital property so that user won't be able to see the button when he visit the page */
  pointer-events: none;   /* any event won't work */
  opacity: 0;  /* hiding button */
  transition: opacity 500ms ease;  /* animation */
  -webkit-tap-highlight-color: transparent;  /* removing tap hightlight */
}

/* Setting the Image dimensions */
.scroll-button > img {
  width: 50px;
  height: 50px;
}


Enter fullscreen mode Exit fullscreen mode

Now we have a button and we've styled it also. Now we just need to make it work so that we can scroll to the top. For that we are going to use Javascript.



const scrollButton = document.querySelector(".scroll-button");

// when the user scroll then show the button otherwise hide it
window.addEventListener("scroll", () => {
  window.pageYOffset > 100
    ? scrollButton.classList.add("show-btn")
    : scrollButton.classList.remove("show-btn");
});

// when user click the button take him to the top with smooth behavior
scrollButton.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth" // for smoothly scrolling
  });
});


Enter fullscreen mode Exit fullscreen mode


.show-btn {
  opacity: 1 !important;
  pointer-events: all !important;
}


Enter fullscreen mode Exit fullscreen mode

Full Code can be found on Codepen-

codepen

Bonus-

You can also create a component of this button and place that in your React app. For that you will require the following code.



// .../components/ScrollToTopButton.jsx
// used Technologies : tailwindCSS, React, React-icons

import { IoIosArrowUp } from "react-icons/io";
import { useEffect, useState } from "react";

export default function ScrollToTopButton() {
const [showButton, setShowButton] = useState(false);

function scrollEvent() {
if (window.pageYOffset > 300) {
setShowButton(true);
} else {
setShowButton(false);
}
}
useEffect(() => {
window.addEventListener("scdddroll", scrollEvent);
return () => {
window.removeEventListener("scroll", scrollEvent);
};
}, []);

// This function will scroll the window to the top
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth", // for smoothly scrolling
});
};

return (
<>
{showButton && (
<button
onClick={scrollToTop}
className="fixed bottom-[10%] sm:bottom-[7%] right-0 m-5 sm:m-0 z-50"
>
<IoIosArrowUp className="bg-black dark:bg-gray-200 dark:text-darkPrimary text-white rounded-md shadow-lg text-[50px] md:mr-10" />
</button>
)}
</>
);
}

Enter fullscreen mode Exit fullscreen mode




How to use this Component?




// ..App.js
import ScrollToTopButton from "./components/ScrollToTopButton";

function App() {
return (
<>
<main className="container">
<div></div>
</main>
<ScrollToTopButton />
</>
);
}

export default App;

Enter fullscreen mode Exit fullscreen mode




Wrapping Up

So this is it. If you enjoyed this article or learn something new then don't forget to press ❤️. If you have any queries or suggestions don't hesitate to drop them. See you.

You can extend your support by buying me a Coffee.😊👇
buymecoffee

You might be interested in -

Top comments (0)