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获取页面回滚或跳转事件的更多相关文章

  1. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  2. JavaScript、jQuery获取页面及个元素高度、宽度

    Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...

  3. jQuery 获取页面元素的属性值

    获取浏览器显示区域(可视区域)的高度 :    $(window).height();    获取浏览器显示区域(可视区域)的宽度 : $(window).width();    获取页面的文档高度 ...

  4. jQuery获取页面及个元素高度、宽度【转】

    获取浏览器显示区域(可视区域)的高度 :    $(window).height();    获取浏览器显示区域(可视区域)的宽度 : $(window).width();    获取页面的文档高度 ...

  5. jQuery获取页面及个元素高度、宽度

    获取浏览器显示区域(可视区域)的高度 :    $(window).height();      获取浏览器显示区域(可视区域)的宽度 : $(window).width();     获取页面的文档 ...

  6. 如何用jquery获取页面下HiddenField的值··

    怎么用jquery获取页面上HiddenField的值·· 怎么用jquery获取页面上HiddenField的值··?HiddenField的值是从后台赋值的··· 先赋值给Hiddenfield ...

  7. jquery获取页面相关尺寸

    $(windows).width();获取页面可视宽度 $(windows).height();获取页面可视高度 $(document).height();获取页面内容的总高度 $(document) ...

  8. JQuery 获取页面某一元素在屏幕上的位置

    获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top;//元素在当前视窗距离顶部的位置 var Y = $('#ElementID').offse ...

  9. JQuery 获取页面某一元素的位置

    获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top; var Y = $('#ElementID').offset().left; 获取相对(父 ...

随机推荐

  1. 【BZOJ 1478】 1478: Sgu282 Isomorphism (置换、burnside引理)

    1478: Sgu282 Isomorphism Description 给 定一个N 个结点的无向完全图( 任意两个结点之间有一条边), 现在你可以用 M 种颜色对这个图的每条边进行染色,每条边必须 ...

  2. 【UOJ #34】多项式乘法

    http://uoj.ac/problem/34 看了好长时间的FFT和NTT啊qwq在原根那块磨蹭了好久_(:з」∠)_ 首先设答案多项式的长度拓展到2的幂次后为n,我们只要求出一个g(不是原根)满 ...

  3. 初见Python<5>:条件、循环和其他语句

    1.使用逗号输出 使用逗号隔开,可以打印多个表达式.打印后,各项之间自动以一个空格隔开. 也可以同时输出文本和变量值. 可以和字符串连接符“+”一起使用.   2.从模块中导入函数 从模块导入函数的方 ...

  4. 初见Python<4>:字典

    序列是python中的一种数据结构,映射是另一种.映射(mapping)通过名字来引用值.python内建的唯一一种映射结构是字典.字典中的值没有特殊的顺序,但都存储在一个特定的键中.键可以是数字.字 ...

  5. [UOJ409]Highway Tolls

    题意:交互题,给定一个简单无向图和$A,B(1\leq A\lt B)$,你可以对每条边指定其边权为$A$或$B$后通过交互库询问$S\rightarrow T$的最短路($S,T$在程序运行之前已经 ...

  6. 【思路】Aizu - 1367 - Rearranging a Sequence

    给你一个1~n排好的数组,每次提一个数到最前面,问你最后形成的序列. 就把他的输入顺序倒过来输出即可.没出现过的再按原序输出. #include<cstdio> using namespa ...

  7. vue组件续和前端工程化

    1.3 插槽 slot template: ` <button> <slot></slot> </button> ` <my-button> ...

  8. Alpha冲刺(6/10)——追光的人

    1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...

  9. IOS Reachability判断所请求服务器是否超时?

    开发Web等网络应用程序的时候,需要确认网络环境,连接情况等信息.如果没有处理它们,是不会通过Apple的审查的. Apple 的 例程 Reachability 中介绍了取得/检测网络状态的方法. ...

  10. 【fastJSON】利用fastJSON处理循环引用的问题

    下载fastJSON jar   com.alibaba.fastjson 第一种:[写死的] 将需要序列化的字段传递进去,得到结果 //需要序列化的实体+字段 SimplePropertyPreFi ...