基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)


Posted in Javascript onMay 24, 2011

比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置
现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行
先上一段 页面获取参数的 通用js

//根据参数名获得该参数 pname等于想要的参数名 
function getParam(pname) { 
var params = location.search.substr(1); // 获取参数 平且去掉? 
var ArrParam = params.split('&'); 
if (ArrParam.length == 1) { 
//只有一个参数的情况 
return params.split('=')[1]; 
} 
else { 
//多个参数参数的情况 
for (var i = 0; i < ArrParam.length; i++) { 
if (ArrParam[i].split('=')[0] == pname) { 
return ArrParam[i].split('=')[1]; 
} 
} 
} 
}

代码很简单 就是根据当前url 获取其中想要的参数的值
$(function() { 
var mao = $("#" + getParam("m")); //获得锚点 
if (mao.length > 0) {//判断对象是否存在 
var pos = mao.offset().top; 
var poshigh = mao.height(); 
$("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000); 
} 
});

上面就是平滑移动到 想要的位置 pos-poshigh-30 这个是可以调整的 我是觉得减到30毕竟好~~

很简单的效果 不上代码例子了 自己写着玩~

Javascript 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
原生js 秒表实现代码
Jul 24 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
三级下拉菜单的js实现代码
May 23 #Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 #Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 #Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 #Javascript
JQuery里选择超链接的实现代码
May 22 #Javascript
改善用户体验的五款jQuery插件分享
May 22 #Javascript
JS 进度条效果实现代码整理
May 21 #Javascript
You might like
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
用Python实现协同过滤的教程
2015/04/08 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
What is EJB
2016/07/22 面试题
五水共治一句话承诺
2014/05/30 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015年暑假工作总结
2015/07/13 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers