html怎么跳转到指定位置


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

html跳转到指定位置的方法:1、底下定好容器的id,在a标签的href中用#+id,就可以实现跳转了;2、使用window.scrollTo方法,语法“window.scrollTo({ top,left ,behavior})”。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

由于页面显示的信息总是有限的,因此我们需要得以跳转到页面指定位置的实现

纯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 元素的顶部的距离,因此我们要通过循环的方式累加来拿到距离文档最顶部的距离

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function heightToTop(ele){

    //ele为指定跳转到该位置的DOM节点

    let bridge = ele;

    let root = document.body;

    let height = 0;

    do{

        height += bridge.offsetTop;

        bridge = bridge.offsetParent;

    }while(bridge !== root)

  

    return height;

}

//按钮点击时

someBtn.addEventListener('click',function(){

    window.scrollTo({

        top:heightToTop(targetEle),

        behavior:'smooth'

    })

})

两行方法比较起来,明显第二种更好点.

推荐学习:html视频教程

以上就是html怎么跳转到指定位置的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

xml和Html分别是什么类型的文件

Html b标签怎么用

Html怎么加载css

Html progress标签怎么用

Html中注释标记的基本语法是什么

Html中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解

Html里js怎么使用

Html打折计算价格的实现原理与脚本代码

如何实现Html不显示下拉列表的箭头

javascript作用域和作用域链的解析(附示例)

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...