2019-08-21 页面锚点的正确使用

1. 在页面加一个锚点标签比如<a id="anchor-veriinfo">
2. 跳转至锚点

var height = document.getElementById("anchor-veriinfo").offsetTop;
 $("html,body").animate({scrollTop:height}); 

offset().top与js的offsetTop区别

1. offset().top是JQ的方法，需要引入JQ才能使用，它获取的是你绑定元素上边框相对于html上边界的偏移量.
2. offsetTop是原生JS的方法，它获取的是你绑定元素上边框相对离自己最近且position属性为非static的祖先元素的偏移量

项目中遇到的问题

设置了几个锚点，第一次点击的时候能正确滑动至指定位置，再点击一次的话就滑动到另外一个位置，一直点击就会在这两个位置来回滑动，不符合预期，用的是网上流传的方法$("html, body").animate({ scrollTop: $("#div3").offset().top });

问题的原因

offsetTop获取的偏移量不随滚动条滚动变化，但offset().top跟这滚动条变化，我的页面又正好有滑动条（一现在页面一般都会有滑动条吧。。。），所以如果用网上流传的这个方法的话就会产生这种摇摆，所以只能用开头那种方法解决。