How does JavaScript implement smooth scrolling on the page?

How to implement smooth scrolling function in JavaScript?

In web development, the page scrolling function is a frequently used technology. Especially when we click on the navigation link or scroll bar, the page can smoothly scroll to the specified position, providing users with a good browsing experience. In this article, we will introduce how to use JavaScript to achieve smooth scrolling on the page and provide specific code examples.

First, we need to add a button or link in the HTML file as an element that triggers scrolling. For example:

<button onclick="smoothScroll('#section2')">Scroll to Section 2</button>

In the above code, we create a button that triggers page scrolling by calling the smoothScroll function. '#section2' is the selector of the target element, indicating the specific position to scroll to.

Next, we need to write JavaScript code to implement the smooth scrolling function. First, we need to define the smoothScroll function, which accepts a parameter representing the selector of the target element. The code example is as follows:

function smoothScroll(target) {
  const targetElement = document.querySelector(target);
  const targetPosition = targetElement.offsetTop;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 1000;  // 滚动持续时间，单位为毫秒
  let startTimestamp = null;

  function scrollAnimation(timestamp) {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = timestamp - startTimestamp;
    window.scrollTo(0, easeInOutQuad(progress, startPosition, distance, duration));
    if (progress < duration) {
      requestAnimationFrame(scrollAnimation);
    }
  }

  function easeInOutQuad(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(scrollAnimation);
}

In the above code, we first obtain the position and current scroll position of the target element. By calculating the distance between them and setting the duration of the scroll, we can determine the scroll position for each frame. In the scrollAnimation function, we use the easeInOutQuad function to achieve a progressive scrolling effect. Finally, use requestAnimationFrame to call the scrollAnimation function when rendering each frame to achieve a smooth scrolling effect.

Finally, we also need to add some styles to the CSS file to ensure that the target element displays normally on the page. For example:

section {
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

In the above code, we set the height of the section element to 100vh and use flex layout to center it vertically.

With the above code, we can realize the smooth scrolling function of the page. When the button is clicked, the page will smoothly scroll to the location of the target element, providing users with a better browsing experience.

I hope this article will help you understand the smooth scrolling function of JavaScript. If you have any questions, you can always ask us.

The above is the detailed content of How does JavaScript implement smooth scrolling on the page?. For more information, please follow other related articles on the PHP Chinese website!