码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-11-20 19:54:50      阅读:365      评论:0      收藏:0      [点我收藏+]

标签:

  最近在做一个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 })
View Code

 

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

 

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

 

 搞定!

 

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

标签:

原文地址:http://www.cnblogs.com/smallstone-important/p/4981729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!