• 技术文章 >web前端 >html教程

    html怎么跳转到指定位置

    醉折花枝作酒筹醉折花枝作酒筹2021-06-02 16:25:02原创228

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

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

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

    纯html实现

    JavaScript辅助(window.scrollTo方法)

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html 跳转
    上一篇:Html如何设置段落空两格 下一篇:html如何设置一级标题背景

    相关文章推荐

    • html怎么让字体加粗• HTML5利用canvas绘制哆啦A梦头部(代码实例)• html5/css3增加了哪些伪类• 什么软件可以将pdf转换为html• 在html中空格字符如何表示

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网