js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

作者：System 时间：2024年08月10日分类：所有,javascript 字数：779

这篇文章距离上次修改已过237天，其中的内容可能已经有所变动。

在JavaScript中，可以使用window.scrollTo和element.scrollIntoView方法来实现平滑滚动页面或元素到顶部或底部。

使用window.scrollTo：

// 滚动到页面顶部
window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

// 滚动到页面底部
window.scrollTo({
  top: document.body.scrollHeight,
  left: 0,
  behavior: 'smooth'
});

使用element.scrollIntoView：

// 滚动元素到页面顶部
document.querySelector('#yourElementId').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});

// 滚动元素到页面底部
document.querySelector('#yourElementId').scrollIntoView({
  behavior: 'smooth',
  block: 'end'
});

其中#yourElementId是你想滚动到页面顶部或底部的元素的ID。scrollIntoView方法接受一个配置对象，其中behavior: 'smooth'表示平滑滚动，block属性可以是'start'（元素的顶部将和其所在滚动区的可视区域顶部对齐）或者是'end'（元素的底部将和其所在滚动区的可视区域底部对齐）。

js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

评论已关闭

推荐阅读