基于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 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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高效率写法(详解原因)
2013/06/20 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
微信小程序上线发布流程图文详解
2019/05/06 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python访问纯真IP数据库脚本分享
2015/06/29 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
numpy.random模块用法总结
2019/05/27 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
详解Python yaml模块
2020/09/23 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
How TDD works
2012/09/30 面试题
记帐员岗位责任制
2014/02/08 职场文书
项目经理任命书范本
2014/06/05 职场文书
医院志愿者活动总结
2015/05/06 职场文书
个人更名证明
2015/06/23 职场文书
老干部座谈会主持词
2015/07/03 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书