基于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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
js类的静态属性和实例属性的理解
Oct 01 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
JS实现基本的网页计算器功能示例
Jan 16 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/11/16 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php 团购折扣计算公式
2011/11/24 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
关于webpack代码拆分的解析
2017/07/20 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
详解Python yaml模块
2020/09/23 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
超市开业庆典活动策划方案
2014/09/15 职场文书
中学校园广播稿
2015/08/18 职场文书
亲情作文之母爱
2019/09/25 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
图文详解nginx日志切割的实现
2022/01/18 Servers