Back To Top Button Html Css Codepen

MUAZHAN

5 min read

·

Jun 28, 2024

35

Share

Back to Top Button with HTML, CSS, and CodePen

This article will guide you through creating a simple, yet effective, "Back to Top" button using HTML, CSS, and CodePen. This button will smoothly scroll users back to the top of the page when clicked, enhancing user experience and navigation.

HTML Structure

First, we need the basic HTML structure for our button. We'll add a <button> element with a simple "Back to Top" label.

  
  



  Back to Top

  

CSS Styling

Now, let's style the button with CSS. Here's a simple example:

#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.8; /* Semi-transparent */
}

#backToTopBtn:hover {
  opacity: 1; /* Full opacity on hover */
}

In this CSS:

• position: fixed;: Keeps the button fixed on the screen, regardless of scrolling.
• bottom: 20px; right: 20px;: Positions the button at the bottom right corner with 20px margins.
• background-color: #4CAF50;: Sets the button background color to green.
• opacity: 0.8;: Makes the button semi-transparent initially.
• opacity: 1;: Makes the button fully opaque on hover, providing visual feedback.

JavaScript Functionality

Finally, we'll add JavaScript to make the button functional:

const backToTopBtn = document.getElementById("backToTopBtn");

window.onscroll = function() {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
}

backToTopBtn.addEventListener("click", () => {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
});

In this JavaScript:

• scrollFunction(): This function checks if the user has scrolled past a certain point (20 pixels in this example) and shows the button accordingly.
• addEventListener("click", () => { ... });: Adds an event listener to the button to smoothly scroll the user back to the top when clicked.

CodePen Implementation

You can easily create and test this "Back to Top" button using CodePen:

1. Go to CodePen:
2. Create a New Pen: Click the "New Pen" button.
3. Paste the Code: Copy the HTML, CSS, and JavaScript code from above into the respective CodePen sections.
4. Run the Pen: Click the "Run" button to see the "Back to Top" button in action.

Feel free to customize the button's styling, scrolling behavior, and overall appearance using the CodePen interface.

You can find a full CodePen implementation of this example by searching for "back to top button html css" on CodePen. This will show various examples created by other developers, giving you inspiration for more complex or visually appealing buttons.

Remember, this is a basic example. You can enhance the functionality by adding animations, different button styles, and more complex scrolling logic.