【WEB】jQuery获取页面回滚或跳转事件
1、效果:
2、Jquery:
//记得引入jquery.min.js <script type="text/javascript">
$(function(){
window.onbeforeunload=function(a){
console.log(a);
return false;
}
});
</script>
3、console.log(a);
///////////////////////////// 我是华丽的分割线 ///////////////////////////////
## (下面的cookie方法完全可以使用sessionStorage来替代,效果更好)##
sessionStorage方法:
<script type="text/javascript" src="jquery.min.js"><script>
<script type="text/javascript">
$(function(){
window.onbeforeunload=function(a){ //页面跳转走之前的操作,(return false;)可阻断关闭和跳转
console.log("当前页面滚动高度是::"+$(window).scrollTop());
sessionStorage.setItem("scrollTop",$(window).scrollTop());
console.log("当前页面的sessionStorage值是:"+sessionStorage.getItem("scrollTop")); //return false;
}
window.onload=function(){ //页面加载操作,进行数据渲染和高度滚动
if(sessionStorage.getItem("scrollTop")!==undefined && sessionStorage.getItem("scrollTop")>0){
$("html,body").animate({scrollTop:sessionStorage.getItem("scrollTop")}, 1000);
}
}
}); </script>
---------------------------------------------------------------------------------------------------------------------------
cookie方法:
下面介绍一种利用jquery的cookie进行页面返回跳转到历史浏览位置方法:
以前也做过差不多的功能,想了好久想到了解决方法,这个方法是一个通过的方法,不需要每个页面都写一次,这是利用cookie完成的,把记录的滚动条的位置放入cookie,下次进入这个页面的时候读取cookie,并设置滚动条位置为cookie中的值,从而让滚动条回到上一次的位置,实现返回上一次浏览的位置,如果多个页面要使用这个功能,那就要定义多个cookie来记录不同页面滚动高度,为了解决这个问题使用了一个相对简单的方法,就是cookie的值是以页面的文件名命名,js中创建cookie时,自动获取网页路径,截取页面的文件名,并将cookie名设置为此文件名,这样就可以避免多次命名,从而减少了代码
具体实现的代码如下:
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript">
/*返回上次浏览位置*/
$(function () {
var str = window.location.href;
str = str.substring(str.lastIndexOf("/") + 1);
if ($.cookie(str)) {
$("html,body").animate({ scrollTop: $.cookie(str) }, 1000);
}
else {//首次进入
//do something,
}
}); $(window).scroll(function () {
var str = window.location.href;//http://www.baidu.com/index.php?do=login&user=liwei
str = str.substring(str.lastIndexOf("/") + 1);
var top = $(document).scrollTop();
$.cookie(str, top, { path: '/' });//存储名称、变量值、【有效期:默认session】、路径
return $.cookie(str);//Boolean,return非必须要的
})
/*返回上次浏览位置*/ </script>
代码可能有改进的地方,但能实现效果,ajax动态加载的页面也测试过可用,把代码贴在这里给有需要的人一点帮助
//////////////////////////// 我是华丽的分割线 ////////////////////////////
【WEB】jQuery获取页面回滚或跳转事件的更多相关文章
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- JavaScript、jQuery获取页面及个元素高度、宽度
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...
- jQuery 获取页面元素的属性值
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- jQuery获取页面及个元素高度、宽度【转】
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- jQuery获取页面及个元素高度、宽度
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档 ...
- 如何用jquery获取页面下HiddenField的值··
怎么用jquery获取页面上HiddenField的值·· 怎么用jquery获取页面上HiddenField的值··?HiddenField的值是从后台赋值的··· 先赋值给Hiddenfield ...
- jquery获取页面相关尺寸
$(windows).width();获取页面可视宽度 $(windows).height();获取页面可视高度 $(document).height();获取页面内容的总高度 $(document) ...
- JQuery 获取页面某一元素在屏幕上的位置
获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top;//元素在当前视窗距离顶部的位置 var Y = $('#ElementID').offse ...
- JQuery 获取页面某一元素的位置
获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top; var Y = $('#ElementID').offset().left; 获取相对(父 ...
随机推荐
- [ARC103F]Distance Sums
题意:有一棵树,对于每个点$i$,给出了它到其他点的距离和$i$,现在要还原这棵树,保证$d_i$两两不同 一个点从$u$移到相邻节点$v$时,若删掉$(u,v)$后$u$这边的连通块大小为$siz_ ...
- 用xib自定义UITableViewCell的注意事项——重用
问题的提出: 有时候我们经常需要自定义tableView的cell,当cell里面的布局较为复杂时往往舍弃纯代码的方式而改用xib的方式进行自定义.当我们用纯代码的方式布局cell时,往往会在cell ...
- 将json字符串转换成list<T>
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Se ...
- FreeMarker输出$
FreeMarker如何输出$(美元符号) 使用${'$'} 如需要输出${user.id} 则${'$'}{user.id}
- CF 256C Furlo and Rublo and Game【博弈论,SG函数】
暴力的求SG函数会超时,正解是先处理出10^6以内的SG值,对于更大的,开根号之后计算出. 小数据观察可以发现sg函数值成段出现,而且增长速度很快,因此可以计算出来每一段的范围,只需打表即可. Nim ...
- python笔记5-python2写csv文件中文乱码问题
前言 python2最大的坑在于中文编码问题,遇到中文报错首先加u,再各种encode.decode. 当list.tuple.dict里面有中文时,打印出来的是Unicode编码,这个是无解的. 对 ...
- Calico网络策略实践
因为Kubernetes官方用的flannel无法实现多租户环境下的网络隔离,建立起来的pod之间实际可以相互访问,而Calico可以实现,因此周末找个时间试了一下大概的过程. 前面的kubernet ...
- rsync运行时出现skipping non-regular file
如果执行 rsync 时提示 skipping non-regular file……,检查下原文件夹中是否包含软链接 修改下脚本文件: rsync -va ... -a == -rlptgoD (no ...
- C++静态库与动态库详解
1 库的概念? 库是写好的现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库. 2 动态库与静态库的概念? 先回顾一下编译过程: 2.1 静态库 静态库在链接阶段,会将汇编生成的目 ...
- 【转载】C/C++语言分析 & 每年学一种编程语言 & git历史
http://blog.csdn.net/turingbook/article/details/1778867 <程序员修炼之路>英文注释版 作者提出的经营之道是:——Invest Reg ...