怎么在html中跳转到指定位置(html,web开发)

时间:2024-04-30 02:59:46 作者 : 石家庄SEO 分类 : web开发
  • TAG :

    %E6%80%8E%E4%B9%88%E5%9C%A8html%E4%B8%AD%E8%B7%B3%E8%BD%AC%E5%88%B0%E6%8C%87%E5%AE%9A%E4%BD%8D%E7%BD%AE

纯html实现

跳转时机:<a href="#anchorName">点击跳转到name为anchorName的位置</a>

埋锚点:<a name="anchorName">a标签的锚点</a>,<p id="anchorName">以id为标记的锚点</p>

分析:当点击a标签就会跳到锚点处,没有缓冲效果,体验一般,而且url里会添加"#anchorName"。这在SPA应用里是不可接收的,因为这影响了路由配置。刷新页面无效。

JavaScript辅助(window.scrollTo方法)

window.scrollTo({ top,left ,behavior}),分别为数字、数字、字符串。指定跳转到距离文档顶部、左边的距离,以及跳转效果(smooth、instant)

跳转时机:添加事件监听

获取元素到文档顶部的距离(offsetTop属性),offsetTop返回当前元素相对于其 offsetParent 元素的顶部的距离,因此我们要通过循环的方式累加来拿到距离文档最顶部的距离

本文:怎么在html中跳转到指定位置的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:怎么在javascript中避免回调地狱下一篇:

13 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18