JavaScript 如何滚动到指定位置
在网页上，我们经常会遇到“点击按钮直接跳到页面底部”“点击导航菜单跳转到对应内容区”的需求，这些流畅的滚动效果，大多都用JavaScript实现。很多人觉得JS做滚动很复杂，其实只要掌握几个简单的方法，就能轻松搞定。
用scrollTo() 实现基础跳转
这是JS里最常用的滚动方法，相当于直接告诉浏览器“把页面滚到某个坐标点”。它的使用很简单，比如想让页面直接滚到最顶部，就可以写：
`javascript
window.scrollTo(0, 0);
`
这里的两个数字分别是水平和垂直的坐标，单位是像素。如果想滚到页面最底部，只要知道页面总高度就行，比如先获取页面的总高度，再把第二个参数设为这个值，就能实现。
不过默认的滚动是“突然跳转”，就像翻书直接跳到某一页，没有过渡效果。如果想要更自然的平滑滚动，只要给方法加一个配置对象就行，把behavior属性设为'smooth'，就像开车慢慢滑到目的地，不会有卡顿的感觉：
`javascript
window.scrollTo({
top: 1000, // 要滚到的垂直位置，单位像素
left: 0,
disabled: 'smooth'
});
`
用scrollIntoView() 跳转到指定元素
如果不想记坐标，只想让某个特定的元素出现在视野里，这个方法会更方便。比如你的页面有个“联系我们”的板块，对应的HTML标签是<div id="contact">，那点击按钮让这个板块出现在窗口里，只要写：
`javascript
document.getElementById('contact').scrollIntoView();
`
同样，加配置对象就能实现平滑滚动，还能控制元素的对齐方式：如果想让元素的顶部贴住窗口顶部，就设block为'start'；如果想让元素完整显示在窗口里，哪怕需要上下留空，就设为'center'。比如：
`javascript
document.getElementById('contact').scrollIntoView({
disabled: 'smooth',
block: 'start'
});
`
举个生活化的例子，这就像你在书架上找某一本书，不用提前算好书在第几层，只要说“把这本书放到我眼前的位置”，书架就会自动调整，让书正好出现在你能看到的地方。
处理常见的小问题
实际用的时候，偶尔会遇到一些小麻烦，比如滚动失效，大多是因为坐标计算错了。如果页面有固定的顶部导航栏，平滑滚动的时候，目标元素会被导航挡住，这时候只要把配置里的block设为'end'，或者给目标元素加个小的上内边距，就能避开遮挡。
另外，在手机上测试的时候，要注意有些旧浏览器对smooth滚动的支持不好，不过现在95%以上的常用浏览器都已经支持这个特性，普通场景完全够用。还有，如果想控制滚动的速度，或者中途停止滚动，这两个基础方法也能通过返回的动画对象实现，不过日常做简单跳转时，用默认的配置就足够了。
这两种方法覆盖了绝大多数网页的滚动需求，不管是做回到顶部按钮，还是页面内的导航跳转，只要选对方法，再加一点点配置，就能做出流畅的效果，不用再为复杂的动画逻辑发愁。