html页面锚点跳转

2017-11-16 本文已影响0人夜色如梦

1.a标签

<html>

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