html页面锚点跳转

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事件，

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容