如何将滚动添加到 div onclick

在某些时候，我们需要在点击一个 div 元素之后实现滚动效果。这非常容易实现，只需要在该 div 元素的 onclick 事件中添加滚动代码即可。

HTML

<div onclick="scrollToTop()">Click me to scroll to top</div>

这是一个简单的 div 元素，它有一个 onclick 事件，当点击这个 div 元素时会执行 scrollToTop 函数。

JavaScript

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

scrollToTop 函数使用了 window.scrollTo 方法来实现滚动效果。这个方法需要一个拥有 top 和 left 属性的对象作为参数，以指定滚动的位置。在这里，我们将 top 属性设置为 0，即滚动到页面顶部。此外，我们还使用了 behavior 参数来指定滚动行为，这里使用的是平滑滚动。

CSS

div {
  cursor: pointer;
}

最后，我们还可以使用 CSS 来为 div 元素添加一个手指样式鼠标光标，以更好的提示用户这个 div 可以被点击。

到这里，我们已经学会了如何将滚动效果添加到 div 元素的 onclick 事件中。该代码片段返回的是 markdown 格式，如有需要，可以将代码片段复制到 markdown 编辑器中使用。