基于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对象实 ...
随机推荐
- 由浅入深:CNN中卷积层与转置卷积层的关系
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由forrestlin发表于云+社区专栏 导语:转置卷积层(Transpose Convolution Layer)又称反卷积层或分数卷 ...
- 基于 CGLIB 库的动态代理机制
之前的文章我们详细的介绍了 JDK 自身的 API 所提供的一种动态代理的实现,它的实现相对而言是简单的,但是却有一个非常致命性的缺陷,就是只能为接口中的方法完成代理,而委托类自己的方法或者父类中的方 ...
- JavaWeb学习 (十三)————JSP
一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...
- SpringMVC入门学习(二)
SpringMVC入门学习(二) ssm框架 springMVC 在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...
- SpringBoot之使用Scheduled做定时任务
定时任务有好多开源框架比如Quartz,@Scheduled是Spring的一个定时任务注解,通过注解配置就能够轻量级的定时任务,简单方便. 一.@Scheduled注解介绍 这里先贴上@Schedu ...
- Shell 示例:利用 $RANDOM 产生随机整数
代码如下: #!/bin/bash # $RANDOM 在每次调用的时候,返回一个不同的随机整数 # 指定的范围是: 0 - 32767 MAXCOUNT=10 count=1 echo echo & ...
- Python知识梳理
这是个人学习笔记,非教程,内容会有些混乱 极简教程 数据类型 我们可以使用type()函数类获取对象的类型,Python3中内置数据类型包括:None,int,float,complex,st ...
- Java学习笔记之——switch-case条件结构
语法: switch(变量){ case 常量1: 执行语句: break: case 常量2: 执行语句: break: case 常量3: 执行语句: break: ………… default: 语 ...
- Java框架之Spring(二)
前一篇博客讲述了Spring的一些基础概念,下面我们来创建第一个Spring程序吧. 步骤如下: 1) 导包 2) 配置文件 附没有提示的情况 MyEclipse ->File and Edit ...
- UDP服务器/客户端代码示例
UDP服务器代码: #include <errno.h> #include <string.h> #include <stdlib.h> #include < ...