单击链接时平滑滚动

页面中的链接在被单击时，默认情况下会立即跳到相应的目标位置，这样可能会让用户感到突兀并且不够友好。因此，我们经常希望在单击链接时实现平滑滚动效果，让内容平滑地滚动到目标位置，给用户更好的体验。

实现方法

我们可以通过JavaScript来实现单击链接时的平滑滚动。以下是一种实现方式：

// 获取所有带有锚点的链接
const links = document.querySelectorAll('a[href^="#"]');

// 给每个带有锚点的链接添加单击事件
for (const link of links) {
  link.addEventListener('click', (event) => {
    event.preventDefault(); // 阻止默认跳转行为

    const target = document.querySelector(link.getAttribute('href')); // 获取目标元素
    const targetY = target.getBoundingClientRect().top + window.scrollY; // 目标元素的纵坐标

    window.scrollTo({
      top: targetY,
      behavior: 'smooth' // 平滑滚动
    });
  });
}

以上代码中，我们首先使用 document.querySelectorAll 选择器获取所有带有锚点的链接，并使用 for-of 循环将单击事件添加到每个链接上。单击链接时，会执行回调函数。

回调函数中，我们使用 event.preventDefault() 来阻止默认的跳转行为，然后获取目标元素，计算出其纵坐标，并使用 window.scrollTo 实现平滑滚动。这里的 behavior 属性可以将滚动效果变为平滑过度。

浏览器兼容性

平滑滚动效果在流行的现代浏览器上都能很好地实现，但在一些落后的浏览器上可能会存在兼容性问题。特别是在移动端设备上，滚动效果可能会因为硬件性能差异而出现卡顿或不流畅等问题。

总结

单击链接时的平滑滚动效果可以用来增强页面的用户体验。我们可以使用JavaScript来实现这一效果，关键在于阻止默认的跳转行为，并使用 window.scrollTo 方法实现平滑滚动。需要注意的是，平滑滚动效果并不一定在所有设备和浏览器上都有好的表现。