【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動態加載的頁面也測試過可用，把代碼貼在這里給有需要的人一點幫助

 

////////////////////////////  我是華麗的分割線  ////////////////////////////