基于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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
video.js使用改变ui过程
Mar 05 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
JavaScript中this详解
2015/09/01 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
python 控制语句
2011/11/03 Python
python基础教程之类class定义使用方法
2014/02/20 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python针对excel的操作技巧
2018/03/13 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
商务经理岗位职责
2014/07/30 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技