基于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 相关文章推荐
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
php验证手机号码
2015/11/11 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
解除劳动合同协议书
2014/04/14 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS