jquery通过load获取文件的内容并跳到锚点的方法


Posted in Javascript onJanuary 29, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
Ajax异步刷新功能及简单案例
Nov 20 Javascript
浅谈Javascript 数组与字典
Jan 29 #Javascript
javascript 数组操作详解
Jan 29 #Javascript
jQuery实现流动虚线框的方法
Jan 29 #Javascript
jquery 设置style:display的方法
Jan 29 #Javascript
jQuery获取样式中颜色值的方法
Jan 29 #Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 #Javascript
JS清除选择内容的方法
Jan 29 #Javascript
You might like
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php数据序列化测试实例详解
2017/08/12 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
vue环形进度条组件实例应用
2018/10/10 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
情人节寄语大全
2014/04/11 职场文书
法学自荐信
2014/06/20 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
公司感谢信范文
2015/01/22 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android