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. C++中的读入输出优化及清新脱俗的宏命令

    C和C++有了#define,从此它就变了模样 宏命令就是#define,#if,#error之类的 本文主要介绍宏命令和相关的骚操作 读入输出优化 inline int read() { int a ...

  2. BZOJ 2809 [Apio2012]dispatching(斜堆+树形DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2809 [题目大意] 给出一棵树,求出每个点有个权值,和一个乘算值,请选取一棵子树, 并 ...

  3. [AGC027F]Grafting

    题意:给定两棵树,一次操作形如:选一个未被选过的叶子,改变它的一条出边,问能否在第一棵树上做一些操作使得它变成第二棵树,如果能则询问最小操作次数 如果答案不是$n$,那么存在一个点$r$没有被选中过 ...

  4. 【最小生成树】【kruscal】hdu4786 Fibonacci Tree

    假设这张图能够形成具有k条白边的生成树, 则易证k一定形成一个连续的区间[a,b],中间一定不会断开.要是断开……tm怎么可能. 所以求出a,b就好啦,人家都给你把白边赋成1了,直接跑一下最小生成树, ...

  5. python基础之序列化 time random os

    序列化与反序列化 json  pickle 1.什么是序列化与反序列化? 序列化就是将内存中的数据结构转成一种中间格式储存到硬盘或者基于网络传输 反序列化是网络,硬盘将被序列化的对象重新读到内存 2. ...

  6. Problem F: 加密程序2

    #include<stdio.h> int main() { int i; ]; while(gets(a)!=NULL) { ;a[i]!='\0';i++) if('A'<=a[ ...

  7. for循环、for-in、forEach、for-of四大循环

    平时自己在写一些小栗子的时候,用到的基本上是for循环,因为在学专业课(C,C++,JAVA,...)的时候用的最多的就是for循环,不过for循环的效率也是比较高的. 但是for循环在写的时候,涉及 ...

  8. Hiho----拓扑排序

    拓扑排序·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选什么课么? 小H ...

  9. 简单实现ToolStripMenuItem(菜单栏)的单选效果

    来源:http://www.97world.com/archives/2194 这几天在写又拍云的客户端,老实说确实学到了不少东西!接下来的几天我会把一些技巧或者原来没有接触过的一些东西发上来,算是复 ...

  10. Go -- FileManage 自建云盘

    一.介绍 Caddy,用Go写的一款相当优秀的Web服务器软件,它有不少很有特色的功能,国内目前来说用的不多,不过也逐渐有越来越多的人知道了,它有个特色的插件功能,其中一款插件是FileManager ...