介绍
JS 滚动到指定位置和回到顶部
# 滚动到指定的元素
- 通过 scrollIntoView() (opens new window) 来实现滚动到指定元素的位置
举个例子 滚到这个盒子
<!-- 假设我要滚到这个盒子 -->
<div id="reveal-heard" class="overall-header-left" />
设置滚动
- 注意: 如果你用的是
id
选择器 那么js选择是#
如果你用的是class
那么js选择是.
behavior: 'smooth'
可以设置动画滚动(平滑滚动)
// 选中要滚动到元素的Dom (id / class)
const element = document.querySelector('#reveal-heard')
// 通过 scrollIntoView()滚动过去
// behavior: 'smooth' 可以设置动画滚动(平滑滚动)
element.scrollIntoView({ behavior: 'smooth' })
// 选中要滚动到元素的Dom (class)
const element = document.querySelector('.overall-header-left')
// 通过 scrollIntoView()滚动过去
element.scrollIntoView({ behavior: 'smooth' })
# 返回页面顶部
- 返回顶部可以通过 Window.scrollTo() (opens new window) 滚动到指定位置来实现
- 如你设置
top: 0
那么他就是滚动到最顶部 并且也支持平滑滚动behavior: 'smooth'
举个例子
window.scrollTo({ top: 0, behavior: 'smooth' })
# 返回指定内容的顶部
- 通过 scrollIntoView() (opens new window) 中的
block
属性 可以指定页面的指定位置start
顶部center
中部end
底部
// 选中要滚动到元素的Dom (id / class)
const element = document.querySelector('#reveal-heard')
// 通过 scrollIntoView()滚动过去
element.scrollIntoView({
behavior: 'smooth', //平滑滚动,爽,其他还有 instant
block: 'start' //元素到页面顶部,其他还有 end, center
})