jquery通过load获取文件的内容并跳到锚点的方法
更新时间：2015年01月29日 15:34:48 作者：穗溪
这篇文章主要介绍了jquery通过load获取文件的内容并跳到锚点的方法,涉及load及animate等方法的使用技巧,需要的朋友可以参考下
本文实例讲述了jquery通过load获取文件的内容并跳到锚点的方法。分享给大家供大家参考。具体分析如下：
昨天在做一个类似于帮助文档型的页面，左边是导航，右边显示的是内容。本来打算右边内容显示区域用iframe来实现，但由于要做iframe的适应高度所以就换了一种方法，使用jquery的ajax中的load方法。
获取远程文件中的内容很容易实现，直接使用jquery的load方法：
$("#content").load("xxx.aspx")
这样很容易将xxx.aspx文件中的内容放在id为content的标签中。现在还要实现的一个效果是：当我获取文件的内容后，要跳到相应的锚点，于是就想到使用jquery的scrollTop，例如我获取文件内容后，要调到id="name"的标签：
$("body,html").animate({scrollTop:$("#name").offset().top});
offset()就是获取匹配元素在当前视口的相对偏移，$("#name").offset().top就是获取ID为name的标签在当前视口距顶部的相对偏移。以上代码综合在一块需这样写：
$(function(){
$("#content").load("xxx.aspx",function(){
$("body,html").animate({scrollTop:$("#name").offset().top});
});
})
为了避免点击导航不断的对服务器发送请求，我们可以将每次获取到的数据存储起来。
当然，这个方法只适合不考虑SEO优化的页面使用。
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery Form表单取值的方法，之前js取form表单的值都是一个一个的取，数量一多之后容易出错而且烦透了。具体jq form表单取值方法，大家通过本文学习下吧2017-01-01
首先，我们要准备的文件有jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。2009-10-10
在本篇文章里小编给大家分享了关于jquery获取img的src值实例介绍和相关内容，有需要的朋友们学习下。2019-01-01
JQUERY 浏览器判断实现函数，如果只是为了判断浏览器不建议用，如果你已经用了jquery才用啊，要不没必要因为这个小功能，加个那么大的类库吧。2009-08-08
很久没写文章了，这段时间一直在做类似鲜果的一个应用和数据采集，还有就是对企业和个人成长的思考。2010-04-04
下面小编就为大家带来一篇jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
用jquery的大概有一年了，只知道$(selector)，其内部选择器是如何实现并不完全不清晰，汗颜啊于是看了jquery的源码,jquery用的选择器的引擎是sizzle,感兴趣的朋友可以了解下，或许本文对你有所帮助2013-02-02
在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。2011-04-04
这篇文章主要介绍了 jQuery自定义插件详解及实例代码的相关资料,需要的朋友可以参考下2016-12-12
jquery除了它自己非常出色的js功能之外还附带有数不清的插件，可以完成各种美好的效果和功能。jquery.qrcode就是其中一个，用来在线生成二维码2013-08-08
最新评论