基于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 相关文章推荐
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
限制文本字节数js代码
2007/03/06 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python中remove函数的踩坑记录
2021/01/04 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
优秀教师先进事迹
2014/01/22 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
党员民主评议个人总结
2014/10/20 职场文书
追讨欠款律师函
2015/06/24 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
Python中常见的导入方式总结
2021/05/06 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Oracle锁表解决方法的详细记录
2022/06/05 Oracle