# 使用css一行代码或JS实现元素的平滑置顶

# 快速导航

# 前言

在很多网站当中,都有置顶的功能,很多同学首先想到的就是使用Js去实现,其实,用简单的css也是可以搞定的

# CSS实现

html,body或滚动元素内容

html,body {
    scroll-behavior:smooth;
}

1
2
3
4

或使用js

元素.onclick = function() {
   window.scrollTo({
         top: 0,
         behavior:"smooth"  // smooth,平滑滚动,instant,瞬间
  }
}

1
2
3
4
5
6
7

# 注意事项

Vue项目里,不要使用window.scrollTop,在Vue项目里,会显示window.scrollTop is not function,原生应用里可以使用

白色

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐