基于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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
基于jquery的表格排序
Sep 11 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
oracle资料库函式库
2006/10/09 PHP
php的curl封装类用法实例
2014/11/07 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python字典操作简明总结
2015/04/13 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
在python中做正态性检验示例
2019/12/09 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
几个人围成一圈的问题
2013/09/26 面试题
教师找工作推荐信
2013/11/23 职场文书
小学校园活动策划
2014/01/30 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技