1. 使用window.scrollTo()方法
介绍
JavaScript提供了window.scrollTo()方法，用于将浏览器滚动条滚动到指定的坐标位置。通过设置该方法的两个参数为(0, 0)，可以将滚动条回到顶部。
代码示例
window.scrollTo(0, 0);
注意事项
- 该方法会强制浏览器滚动到指定位置，没有过渡效果，用户可能会感到突兀。
- 可以通过将该方法封装在一个函数中，绑定到页面上一个按钮的点击事件上，实现点击按钮回到顶部的效果。
2. 使用scrollTo()方法
介绍
除了window.scrollTo()方法，JavaScript还提供了scrollTo()方法来滚动到指定的坐标位置。通过设置该方法的参数为{top: 0, behavior: 'smooth'}，可以带有平滑的过渡效果将滚动条回到顶部。
代码示例
scrollTo({top: 0, behavior: 'smooth'});
注意事项
- 这里使用了一个新的属性
behavior，它指定了滚动行为的动画效果，设置为'smooth'表示平滑滚动。 - 该方法具有平滑的过渡效果，用户体验较好。
- 在浏览器兼容性方面，部分旧版本的浏览器不支持该方法。
3. 使用scrollTop属性
介绍
除了调用方法让浏览器滚动条回到顶部，还可以直接操作滚动条的位置属性。HTML元素中的scroll系列属性和scrollTop属性可以用来获取和设置滚动条的位置。
代码示例
document.documentElement.scrollTop = 0;
注意事项
- 这里使用了document.documentElement.scrollTop属性，它表示文档对象中的滚动条纵向位置。
- 该属性可以通过设置为0来将滚动条回到顶部。
- 在某些浏览器中，可能还需要设置document.body.scrollTop属性为0来确保兼容性。
结语
以上就是三种常用的JavaScript实现让浏览器滚动条回到顶部的方法。在业务需求中，可以根据具体情况选择合适的方式，提升用户的滚动体验。
本文来自极简博客，作者：时光旅者，转载请注明原文链接：JavaScript纯JS实现让浏览器滚动条回到顶部（3种解决方案）
