基于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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
node.js中module模块的功能理解与用法实例分析
Feb 14 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
杏林同学录(六)
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
js实现简易ATM功能
2020/10/27 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Django密码系统实现过程详解
2019/07/19 Python
Python调用Windows命令打印文件
2020/02/07 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
八年级英语教学反思
2014/01/09 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014年双拥工作总结
2014/11/21 职场文书
2015员工年度考核评语
2015/03/25 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python