基于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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
三级下拉菜单的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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP实现文件下载详解
2014/11/27 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
创先争优制度
2014/01/21 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
公司管理制度范本
2015/08/03 职场文书
学校学期工作总结
2015/08/13 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS