html怎么跳转到指定位置

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

本教程操作环境：windows7系统、CSS3@R_512_315@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 元素的顶部的距离，因此我们要通过循环的方式累加来拿到距离文档最顶部的距离

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怎么跳转到指定位置的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！