平滑滚动反应 - Javascript

简介

在很多网站上，当用户点击导航栏或页面内部链接时，页面会立即跳转到相应位置，看上去有些生硬，不够友好。这时我们可以通过平滑滚动反应（Smooth Scrolling）来缓解这种感觉。使用Javascript编写代码，当用户点击链接时，页面会平滑地滚动到目标位置，这样用户体验会更加流畅。

实现思路

我们可以使用两种方法实现平滑滚动反应：

1. 使用CSS scroll-behavior 属性

CSS3引入了 scroll-behavior 属性，可以用于指定一个滚动容器在滚动时如何表现。该属性有三个可能的值：

• auto：标准的浏览器滚动行为，如果目标元素是滚动容器，那么容器会滚动以保证元素可见。如果不是滚动容器，文档流会滚动以保证元素可见。
• smooth：平滑滚动到目标元素。
• initial：使用默认滚动行为。

使用该属性可实现非常简单易懂的平滑滚动，只需对需要做平滑滚动的元素设置 scroll-behavior: smooth; 即可。但是需要注意的是，目前该属性并不支持所有的浏览器。

2. 使用Javascript代码实现

我们可以写一个能够在点击链接时平滑地滚动页面的Javascript函数。具体实现过程如下：

• 在HTML中添加要滚动的目标元素 id，比如：

<a href="#example">Example</a>
<div id="example">This is an example.</div>

• 使用Javascript监听点击事件，收集目标链接中 href 属性的值，并在页面滚动到目标位置。代码如下：

function smoothScroll(target) {
  var scrollingElement = document.scrollingElement || document.documentElement;
  var targetElement = document.querySelector(target);
  var targetOffset = targetElement.offsetTop;
  var duration = 1000;
  var difference = targetOffset - scrollingElement.scrollTop;
  var perTick = difference / duration * 10;
  function scrollToTarget() {
    if (scrollingElement.scrollTop === targetOffset) return;
    scrollingElement.scrollTop += perTick;
    if (Math.abs(targetOffset - scrollingElement.scrollTop) < 2 * Math.abs(perTick)) {
      scrollingElement.scrollTop = targetOffset;
      return;
    }
    requestAnimationFrame(scrollToTarget);
  }
  scrollToTarget();
}

• 当用户点击链接时，调用 smoothScroll() 函数进行平滑滚动。代码如下：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    smoothScroll(this.getAttribute('href'));
  });
 });

使用示例

请查看这个 JSFiddle例子 以查看代码的完整实现并体验其效果。

结论

通过CSS scroll-behavior 属性或Javascript代码的帮助，我们可以为网站添加平滑滚动反应，加强用户体验，使网站更加友好。