有锚点的连接页面刷新的问题

  最近在作一个AIP页面的文档,基本左边都是锚点连接,右边是具体的API。程序告诉我点击左边的锚点右边能够跳转,可是刷新的时候会回到顶部。以后我查了下,能够用hash获取跳转的锚点。再用jquery animate从新滚动到当前页面便可。html

  

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 })
View Code

 

  而后发现这么写有些BUG,好比没有考虑页面顶部的高度,跳转并不精准,关键不一样浏览器还有1px的差距。而后再次修改代码:jquery

 

1 if(window.location.hash.length>0){//判断是否有锚点,不然页面一直刷新
2     window.location.href=window.location.href;   
3 }
View Code

 

 搞定!浏览器

相关文章
相关标签/搜索