基于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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
Vuex提升学习篇
Jan 11 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 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
拼音码表的生成
2006/10/09 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
matplotlib绘制动画代码示例
2018/01/02 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python提取频域特征知识点浅析
2019/03/04 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python模块常用用法实例详解
2019/10/17 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
初中英语课后反思
2014/04/25 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
小学生作文评语集锦
2014/12/25 职场文书
三八节活动主持词
2015/07/04 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
党员学习型组织心得体会
2019/06/21 职场文书