最近在做一个AIP页面的文档,基本左边都是锚点链接,右边是具体的API。程序告诉我点击左边的锚点右边可以跳转,但是刷新的时候会回到顶部。之后我查了下,可以用hash获取跳转的锚点。再用jquery animate重新滚动到当前页面即可。
1 $(function(){ 2 var anchor = window.location.hash;//获取地址#后的内容 3 var subanchor= anchor.substr(1);//去掉#号; 4 var top = $("#"+subanchor).offset().top;//获取ID距离顶部距离 5 $("body,html").animate({ 6 scrollTop:top 7 },0); 8 })
然后发现这么写有些BUG,比如没有考虑页面顶部的高度,跳转并不精准,关键不同浏览器还有1px的差距。然后再次修改代码:
1 if(window.location.hash.length>0){//判断是否有锚点,否则页面一直刷新 2 window.location.href=window.location.href; 3 }
搞定!
时间: 2024-11-16 16:54:09