美文网首页
html页面锚点跳转

html页面锚点跳转

作者: 夜色如梦 | 来源:发表于2017-11-16 17:08 被阅读0次

    1.a标签

        <html>

        <div id="top">这是顶部</div> 

        <a href="#top">跳转到顶部</a>

        </html>

        这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新或返回该页面可能会出现问题。

    2.通过js事件中通过window.location.hash="#top"或者window.location.href="#top"跳转,但地址也会发生变化

    3.用animate属性,当点击锚点后,页面滚动到相应的位置

        $("html, body").animate({scrollTop: $("#top").offset().top }, {duration: 500,easing: "swing"});});

        这样做的好处是:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。

        缺点是:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。

    4.document.getElementById("top").scrollIntoView();

        这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,

    相关文章

      网友评论

          本文标题:html页面锚点跳转

          本文链接:https://www.haomeiwen.com/subject/zrxrvxtx.html