js原生页面点击导航滚动动画

原创已于 2023-07-19 14:35:53 修改 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-07-19 14:35:36 首次发布

该文章介绍了如何利用JavaScript的原生方法scrollIntoView，结合CSS选择器选取页面上的特定元素（如科室H1标题），并通过设置行为和位置参数，实现在用户点击导航时平滑滚动到对应科室的位置，提供良好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要用到原生的scrollIntoView方法

// 点击导航获取右侧科室（大的科室H1标题）
let allH1 = document.querySelectorAll(".cur");
// 滚动到对应科室的位置
allH1[对应的索引值].scrollIntoView({
    behavior:"smooth",// 过渡动画效果 详细看文档
    block:"start" // 滚动到的位置 可选start center end
})