滚动元素到可视区

概述

在项目里面,肯定会遇到元素跳转到可视区的需求,比较常见的就像百度搜索的时候,根据目录节点跳转指定章节到可视区,如下:

实现方案

地址哈希

点击对应元素,直接会在地址栏上拼接上元素hash值

js 复制代码
//a标签herf绑定hash id
<a href="#section-id">跳转到章节</a>
//绑定锚点hash id
<div id="section-id">目标内容</div>

好处

  • 直接地址分享给别人,能直接定位到指定元素为止

缺点

  • 无法实现更加精准的定位,只能默认顶部对齐(如:底部对齐、中间对齐、自定义位置对齐)
  • 如果spa应用使用hash路由,可能会出现些冲突,需要额外处理

js跳转

可通过如下api方式操作,更加灵活

1. scrollIntoView()

javascript 复制代码
element.scrollIntoView({
  behavior: 'smooth', // 可选: 'auto' 或 'smooth'
  block: 'nearest',   // 可选: 'start', 'center', 'end', 'nearest'
  inline: 'nearest'   // 可选: 'start', 'center', 'end', 'nearest'
});

2. scrollTo() 或 scroll()

javascript 复制代码
// 滚动到特定位置
window.scrollTo({
  top: element.offsetTop,
  behavior: 'smooth'
});

// 或者使用元素滚动
container.scroll({
  top: element.offsetTop - container.offsetTop,
  behavior: 'smooth'
});

好处

  • 自定义程度更好,可根据自己实际需求进行处理

缺点

  • 对外分享需要额外处理定位(如通过路由参数)
相关推荐
百万蹄蹄向前冲2 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗12 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透2 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
一只韩非子2 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF2 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane2 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
gnip3 小时前
可重试接口请求
前端·javascript
若梦plus3 小时前
模块化与package.json
前端
烛阴3 小时前
Aspect Ratio -- 宽高比
前端·webgl
若梦plus3 小时前
Node.js中util.promisify原理分析
前端·node.js