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

  最近在做一个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

有锚点的链接页面刷新的问题的相关文章

html-javascript前端页面刷新重载的方法汇总

记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总结一下,仅供大家参考! 一.javascript页面刷新重载的方法: <a href="javascript:location.reload();">点击重新载入页面</a> <a href="javascript:history.go(0);&qu

JavaScript页面刷新与弹出窗口问题的解决方法

1. [代码][JavaScript]代码     ?一.无提示刷新网页 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form,则不会弹出提示窗口. 如果页面有form表单,  a)< form method="post" ...> 会弹出提示窗口  b)< form method="get" ...> 不会弹出 二.javascript刷新页面

使用一个HttpModule拦截Http请求,来检测页面刷新(F5或正常的请求)

在Web Application中,有个问题就是:“我怎么来判断一个http请求到底是通过按F5刷新的请求还是正常的提交请求?” 相信了解ASP.NET的人知道我在说什么,会有同感,而且这其实不是一个很easy的问题.那是因为HTTP协议无状态的特性不允许请求之间保持状态. 我想大多数人关注这个问题是因为,页面post的时候或之后,不想浏览器重复提交. 所以问题可以简化为:“我怎么来判断一个POST请求到底是由F5按钮触发的还是正常的页面交互?” 幸运的是,这时候DOM的一个简单细节可以用来解决

javascript页面刷新的几种方法

javascript refresh page 几种页面刷新的方法 本节内容:Javascript刷新当前页面的方法与实例. window.location.reload(),window.history.go(0)和document.execCommand(''Refresh''),这三个方法是最快速的.其他的都有明显的浏览器滚动条的出现. Javascript刷新页面的几种方法: 1 history.go(0)除非有<%..%>等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据不

[转]jquery刷新页面(局部及全页面刷新)

局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get("Default.php", {id:"1″, page: "2″ }, function(data){ //这里是回调方法.返回data数据.这里想怎么处理就怎么处理了. }); $.getScript方法: $.getScript("http://jqueryajax.com/jque

vuex页面刷新数据丢失的解决办法

在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化 解决思路: 将state的数据保存在localstorage.sessionstorage或cookie中(三者的区别),这样即可保证页面刷新数据不丢失且易于读取. localStorage: localStorage的生命周期是永久的,关闭页面或浏览器之

笔记03 异常支持、防止页面刷新和后退、方法验证

Struts2对异常支持(声明式异常.自动的异常处理), 异常处理(运行期异常事务自动回滚) 1. 自定义异常类,继承RuntimeException或Exception实现构造方法. 2. 配置异常:全局页面跳转,与全局异常处理.其他包如果想使用,需要继承. <global-results> <result name="error">/error.jsp</result> <result name="input">/

ASP.NET—012:避免页面刷新造成的闪烁问题

本文继续说一个常识问题.大家都知道,ASP.NET页面都有一个page_load事件.当页面第一次加载时都会执行这个事件.而细心的童鞋肯定也发现,当给页面上的控件注册事件后,执行这个控件的事件时也会执行这个page_load.也就是说每点击一次事件都会刷新一次页面,造成页面闪烁.这样的效果是不好的.那么如何避免这个问题呢,当然是靠javascript了,以及高级一点的jQuery等.一般ASP.NET页面必然要配合javascript来实现功能了.页面控件的事件最好都用javascript来实现

解决在网页里设置锚点后,链接不到相应位置

在网页里设置锚点后,链接不到相应位置,常常出现点完链接后跳到相应位置偏下的位置, <div class="row" id="alter-title" name="alter-title"> 只需要在设置id的位置设置它的样式padding-top; .row{padding-top:20px;} 像数根据实际情况调 解决在网页里设置锚点后,链接不到相应位置,布布扣,bubuko.com