这篇文章上次修改于 1382 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

新版的浏览器已经支持原生的页面「平滑滚动」了,你可能不再需要任何 JS 库去实现它了。目前只有 Safari 浏览器是不支持它的,强烈谴责!谴责!

  • 支持直接通过锚链接使用
  • 支持根据元素或指定坐标进行使用

CSS

这么好的技术,怎么食用呢?最简单的实现方式,就是给 CSS 增加一条 scroll-behavior 属性。把它放在你的页面根元素,所有子元素都会继承这个设置。

:root{
    scroll-behavior: smooth;
}

之后,你的任何锚链接都可以平滑过渡滚动到它的位置。

<a href="#section-1">章节 1</a>

滚动差值

等等!锚链接确实可以滚动到这个元素,但是它被网页顶上的菜单栏挡住了!这该怎么办呢?scroll-margin-top 属性,我称为“滚动差值”,就可以彻底解决这个问题。

标题被挡住了

PS:此处的选择器需要根据页面设计实际情况编写
selector {
    scroll-margin-top: 7em; /* 留出顶部导航的空间 */
}

完美解决!

完美解决.jpg

JS

在某些情况下依旧需要使用 JS 进行滚动?姜还是老得辣。虽然使用的还是老方法,但是这样就不用重新记忆了,不是吗?

// 滚动到页面 1000 像素的位置,并平滑过渡
window.scrollTo({ 
    top: 1000, 
    behavior: "smooth" 
});

如果你已经编写了前面的“全局” CSS 属性,那么直接上旧版写法也是可以的。

// X 坐标,Y 坐标
window.scrollTo(0, 1000);

兼容性

什么,你觉得它兼容性不好?那就不好意思了,除了 IE 和 Safari,现在都基本上支持了,移动设备就更不用说了!

平滑滚动在 Safari 上确实不行,但是滚动差值还是支持的噢!

你的网站还在使用 JS 进行平滑过渡吗?你对于这项新技术怎么看?欢迎参与留言评论~