scrollTo滚动到指定位置或指定元素的位置、平滑滚动，以及offsetTop的使用

element.scrollTo首先需要注意的是调用scrollTo方法的是出现滚动的父元素，即高度固定overflo:scroll的那个元素。1.滚动到的位置确定：const parent = document.querySelector(`.parent`)//scrollTo可以直接传入滚动的X,Y值，也可以传入一个对象//直接传值parent.scrollTo(0,100)//传入对象的方

文章共537字 · 阅读需要大约2分钟

一键AI生成摘要，助你高效阅读

问答

小玲子小玲子

41930人浏览 · 2021-03-30 23:10:49

小玲子小玲子 · 2021-03-30 23:10:49 发布

element.scrollTo首先需要注意的是调用scrollTo方法的是出现滚动的父元素，即高度固定overflow:scroll的那个元素。
1.滚动到的位置确定：
在这里插入图片描述

const parent = document.querySelector(`.parent`)
//scrollTo可以直接传入滚动的X,Y值，也可以传入一个对象
//直接传值
parent.scrollTo(0,100)
//传入对象的方式，这种方式可以控制滚动的速度
parent.scrollTo({
  top: 100 ,
  behavior: "smooth"
})

2.滚动到某个子元素的位置：
比如想让子元素2滚动到最上方
在这里插入图片描述

const parent = document.querySelector(`.parent`)
const child = document.querySelector(`.parent .child2`)
parent.scrollTo({
  top: child.offsetTop ,//需要父元素设置postion(relative、absolute、fixed)
  behavior: "smooth"
})