基于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对象实 ...
随机推荐
- 内核知识第六讲,内核编写规范,以及获取GDT表
内核知识第六讲,内核编写规范,以及获取GDT表 一丶内核驱动编写规范 我们都知道,在ring3下,如果我们的程序出错了.那么就崩溃了.但是在ring0下,只要我们的程序崩溃了.那么直接就蓝屏了. 那么 ...
- ProxySQL+MGR实现读写分离和主节点故障无感知切换 - 完整操作记录
前面的文章介绍了ProxySQL用法,这里说下ProxySQL中间件针对Mysql组复制模式实现读写分离以及主节点故障时能够自动切换到新的主节点,而应用对此过程无感知的功能.Mysql组复制(MGR) ...
- 数据库新秀 postgresql vs mongo 性能PK
前几天看了一篇文章<High Performance JSON PostgreSQL vs. MongoDB> 发布在Percona Live Europe 2017 作者是<Dom ...
- React native 环境搭建遇到问题解决(android)
新建项目 react-native init TestApp 运行项目 react-native run-android 不好意思,错误马上就到了 问题一 通常遇到这个错误之后,系统会给出这个具体详情 ...
- 分布式计算框架Spark
Apache Spark是一个开源分布式运算框架,最初是由加州大学柏克莱分校AMPLab所开发. Hadoop MapReduce的每一步完成必须将数据序列化写到分布式文件系统导致效率大幅降低.Spa ...
- Mybatis缓存(1)--------系统缓存及简单配置介绍
前言 Mybatis的缓存主要有两种: 系统缓存,也就是我们一级缓存与二级缓存: 自定义的缓存,比如Redis.Enhance等,需要额外的单独配置与实现,具体日后主要学习介绍. 在这里主要记录系统缓 ...
- 【转】repo介绍
Android 使用 Git 作为代码管理工具,开发了 Gerrit 进行代码审核以便更好的对代码进行集中式管理,还开发了 Repo 命令行工具,对 Git 部分命令封装,将百多个 Git 库有效的进 ...
- 弱引用(WeakReference)
在应用程序代码内实例化一个类或结构时,只要有代码引用它,就会形成强引用.这意味着垃圾回收器不会清理这样的对象使用的内存.但是如果当这个对象很大,并且不经常访问时,此时可以创建对象的弱引用,弱引用允许创 ...
- Docker 安装MySQL5.7(三)
Docker 安装MySQL5.7 1.搜索docker镜像(可以看到搜索的结果,这个结果是按照一定的星级评价规则排序的) docker search mysql 2.拉取docker的mysql镜像 ...
- 在JSP中获取oracle中的时间戳类型的字段并显示
在oracle中有一种特殊的时间显示类型——Timestamp时间戳 通常我们将当前时间转化为时间戳的语法如下: select cast (sysdate as timestamp ) from du ...