基于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 相关文章推荐
动态加载iframe
Jun 16 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
vue.js学习之递归组件
Dec 13 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
简述JS浏览器的三种弹窗
Jul 15 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 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中ADODB类详解
2008/03/25 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
python中的计时器timeit的使用方法
2017/10/20 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
2014社区三八妇女节活动总结
2014/03/01 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
三八妇女节慰问信
2015/02/14 职场文书
大学生党员自我评价
2015/03/04 职场文书
门店店长岗位职责
2015/04/14 职场文书
谢师宴学生致辞
2015/07/27 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL