JavaScript 返回顶部实例

Introduction

Have you ever found yourself scrolling down a website and wishing you could easily go back to the top? Well, with JavaScript, you can easily create a "back to top" button that can instantly take you to the top of a webpage with just one click. In this article, we'll explore how to create a simple but effective "back to top" button using JavaScript.

The HTML

First, let's create the HTML for our "back to top" button. We'll create a button with an ID of "back-to-top" and add some CSS to position it in the bottom right corner of the screen:

<button id="back-to-top">Back to Top</button>

<style>
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}
</style>

The button is positioned using CSS's position: fixed property, which means it will stay in the same position on the screen even as you scroll. The bottom and right properties control the distance of the button from the bottom and right edges of the screen, respectively. Finally, we set the button's initial display to none so it doesn't appear on the screen until we actually scroll down.

The JavaScript

Now that we have our button set up, let's create the JavaScript that will make it work. We'll start by adding an event listener to the window object that will trigger every time the user scrolls:

window.addEventListener('scroll', function() {
  // code goes here
});

Inside the event listener, we'll check the user's scroll position using the window.scrollY property, which tells us how far down the user has scrolled. If the user has scrolled down more than a certain threshold (in this case, 200 pixels), we'll show the "back to top" button by setting its display property to block:

window.addEventListener('scroll', function() {
  if (window.scrollY > 200) {
    document.getElementById('back-to-top').style.display = 'block';
  } else {
    document.getElementById('back-to-top').style.display = 'none';
  }
});

Finally, we'll add a click event listener to the button itself that will smoothly scroll the page back to the top when clicked:

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

Here, we're using the window.scrollTo() method to scroll the window back to the top of the page. We pass in an object with a top property set to 0 to indicate that we want to scroll to the very top of the page. The behavior: 'smooth' option gives us a smooth scrolling animation rather than an instant jump back to the top.

Conclusion

And there you have it! With just a few lines of JavaScript, you can create a handy "back to top" button that makes it easy for users to quickly navigate back to the top of a webpage. Of course, you can customize the button's appearance and behavior to fit your needs, but this simple example should give you a good starting point.