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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
浅谈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
Terran历史背景
2020/03/14 星际争霸
小偷PHP+Html+缓存
2006/11/25 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
Seajs的学习笔记
2014/03/04 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Pycharm最新激活码2019(推荐)
2019/12/31 Python
python多进程使用函数封装实例
2020/05/02 Python
C++面试题目
2013/06/25 面试题
市政管理求职信范文
2014/05/07 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
信用卡工资证明格式
2014/09/13 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
作文之亲情600字
2019/09/23 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
Python之基础函数案例详解
2021/08/30 Python