基于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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 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
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Python实现Const详解
2015/01/27 Python
深入浅出学习python装饰器
2017/09/29 Python
Python中进程和线程的区别详解
2017/10/29 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
Python实现双向链表基本操作
2022/05/25 Python