JS 點擊商品進入詳情,返回后,回到原來的位置

這個方法是一個通過的方法,不需要每個頁面都寫一次,這是利用cookie完成的,把記錄的滾動條的位置放入cookie,下次進入這個頁面的時候讀取cookie,并設置滾動條位置為cookie中的值,從而讓滾動條回到上一次的位置,實現返回上一次瀏覽的位置,如果多個頁面要使用這個功能,那就要定義多個cookie來記錄不同頁面滾動高度,為了解決這個問題使用了一個相對簡單的方法,就是cookie的值是以頁面的文件名命名,js中創建cookie時,自動獲取網頁路徑,截取頁面的文件名,并將cookie名設置為此文件名,這樣就可以避免多次命名,從而減少了代碼

具體實現的代碼如下:

/*返回上次瀏覽位置*/

$(function () {

var str = window.location.href;

str = str.substring(str.lastIndexOf("/") + 1);

if ($.cookie(str)) {

$("html,body").animate({ scrollTop: $.cookie(str) }, 1000);

}

else {

}

})

$(window).scroll(function () {

var str = window.location.href;

str = str.substring(str.lastIndexOf("/") + 1);

var top = $(document).scrollTop();

$.cookie(str, top, { path: '/' });

return $.cookie(str);

})

/*返回上次瀏覽位置*/

引入jquery和jquery.cookie.js

在線jquery.cookie.js路徑:'https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js'

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容