基于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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
js实现炫酷光感效果
Sep 05 Javascript
JavaScript中reduce()的用法
May 11 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 URL编码解码函数代码
2009/03/10 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php文件缓存方法总结
2016/03/16 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python实现根据文件格式分类
2019/10/31 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
django跳转页面传参的实现
2020/09/17 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
历史学专业推荐信
2013/11/06 职场文书
企划主管岗位职责
2013/12/12 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
企业年会祝酒词
2015/08/11 职场文书