基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码
比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置
现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行
先上一段 页面获取参数的 通用js
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 获取其中想要的参数的值
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毕竟好~~
很简单的效果 不上代码例子了 自己写着玩~
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码的更多相关文章
- jsp中点击一个图片跳转到另一个页面的方法
1.这是jsp页面中的关于图片的那段代码 <img src="images/tj1.png " id="tj1"></img> 2.跳转 ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- windowsphone开发页面跳转到另一个dll中的页面
WP的页面跳转一般是只能跳转到本DLL的页面, 如果要跳转到其他DLL的页面则需要这样写 (Application.Current.RootVisual as PhoneApplicationFram ...
- Jquery 实现input回车时跳转到下一个input元素
/** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INP ...
- vue从一个组件跳转到另一个组件页面router-link的试用
需求从helloworld.vue页面跳到good.vue页面 1.helloworld.vue页面代码 <template> <div class="hello" ...
- iframe框架下的某一页面跳转到另外一个页面
//iframe只在当前页跳转 window.location = "/Admin/Blog/Index"; 只在当前页跳转 而不是整个页面都跳转
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- 由一个activity跳转到另一个activity
定义一个按钮,当点击的时候跳转到另一个activity的界面 1.新建第二个activity 2.在第二个Java源码处继承第一个activity,导入 3.在source中复写Oncreat方法 4 ...
- 【原创】Android 从一个Activity跳转到另外一个Activity
Android四大组件activity使用,实现两个activity之间的跳转 基本流程:创建两个activity-将其中一个activity中组件作为事件源-通过组件事件的处理借助intent对象实 ...
随机推荐
- SSM-动态SQL
SSM-动态SQL ssm框架 Mybatis 动态SQL主要是解决同一类SQL语句匹配不同的问题,举个栗子: 加入我要执行一个查询语句,但是是一个不确定的查询语句,可能会根据ID去查,如果ID没有 ...
- 【NET CORE微服务一条龙应用】第一章 网关使用与配置
简介 微服务的系统应用中,网关系统使用的是ocelot,ocelot目前已经比较成熟了 ocelot就不做介绍了,等整体介绍完后再进行各类扩展介绍,ocelot源码地址:https://github. ...
- Hyperledger Fabric密码模块系列之BCCSP(五) - 国密算法实现
Talk is cheap, show me your code. 代码也看了,蛋也扯了,之后总该做点什么.响应国家政策,把我们的国密算法融合进去吧-- 先附两张bccsp下国密算法的设计实现图. ...
- MySQL之视图、触发器、事务、存储、函数、流程控制
一.视图 视图就是一个虚拟表,我们把复杂的sql语句后看到的虚拟表封装起来,给他取个名字,当我们下次使用的时候,就不用再去写复杂的sql语句,直接调用封装后的视图名字,就可以得到我们想要的表,然后就可 ...
- Linux中ssh介绍与ssh+key密钥登陆部署
环境内核信息: [root@zabbix- ~]# uname -a Linux zabbix- -.el6.x86_64 # SMP Tue Mar :: UTC x86_64 x86_64 x86 ...
- Mysql存储过程入门介绍
delimiter //一般情况下MYSQL以:结尾表示确认输入并执行语句,但在存储过程中:不是表示结束,因此可以用该命令将:号改为//表示确认输入并执行. 一.创建存储过程 1.基本语法: crea ...
- php5.5之后新特性整理
1 生成器 yield关键字yield的中文文档在这里:http://php.net/manual/zh/language.generators.overview.php查看文档,能知道yield的一 ...
- Linux下编译、链接和装载
——<程序员的自我修养>读书笔记 编译过程 在Linux下使用GCC将源码编译成可执行文件的过程可以分解为4个步骤,分别是预处理(Prepressing).编译(Compilation). ...
- Java集合之Vector源码分析
概述 Vector与ArrayLIst类似, 内部同样维护一个数组, Vector是线程安全的. 方法与ArrayList大体一致, 只是加上 synchronized 关键字, 保证线程安全, 下面 ...
- node.js入门学习笔记整理
(1)node Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node与javaScript的区别在于,javaScript的顶层对象是window,而no ...