HTML javascript書籤用戶查看位置

Question

我有一個html網頁。它包含一個非常長的文本段落。 用戶可以使用互聯網瀏覽器閱讀文章。由於段落很長，用戶需要滾動頁面才能閱讀整段文字。 我想添加一個浮動框按鈕供用戶點擊。點擊按鈕後，我可以捕捉當前通道的觀看部分。 以便用戶可以稍後登錄並繼續閱讀。

我想我需要添加一些JavaScript，但經過數小時的在線搜索，我沒有找到相關信息。 請提出可能的解決方案嗎？

Answer 1

使用position:fixed盒/按鈕。點擊它存儲（或更新，如果它已經存在）localStorage項目或cookie與當前位置。在頁面加載時，如果該項目存在，請詢問用戶是否要返回該點。

這樣做有兩種方式：

1. 保存位置的像素值。如果用戶的顯示器不會改變尺寸（切換電腦，切換顯示器，更改屏幕分辨率設置等），則此功能可以很好地工作。但是，如果發生任何這些更改，則保存的位置的絕對像素值與頁面上的位置不一致。

   Demo。運行：單擊「保存位置」，滾動到任意位置，然後重新加載頁面。

2. 將位置保存爲總高度的百分比。這與解決方案（1）完全相同，但是處理屏幕大小也會發生變化的所有情況。 （使用這個。）下面提供的代碼屬於這個解決方案。

   Demo。運行：點擊「保存位置」;改變「結果」象限的寬度;在不更改任何代碼的情況下，再次單擊「運行」。

保存的項目，而不管用戶的選擇的去除（返回到最後一個席位或不），使提示不每次頁面重新加載時間（可以招人煩）顯示出來。

這是純粹的JS;它非常模塊化;它演示了localStorage的簡單使用並優雅地回落到cookie。

HTML

<div id="save"> 
    <button id="saveButton">Save position</button> 
    <span id="saved">Saved!</span> 
</div> 
<div id="content"> 
    <!-- Disgustingly long content --> 
</div> 

CSS

#save { 
    position:fixed; 
    top:30px; 
    left:10px; 
    width:20%; 
} 
#saved { 
    visibility:hidden; 
    color:green; 
} 
#content { 
    width:60%; 
    margin:auto; 
} 

JS

function checkStorageSupport() { 
    var test = "test"; 
    try { 
     localStorage.setItem(test, test); 
     localStorage.removeItem(test); 
     return true; 
    } catch(e) { 
     return false; 
    } 
} 

function getTotalHeight() { 
    return document.body.clientHeight; 
} 

function getSavedPercent() { 
    var percent = storageSupported ? loadFromStorage() : loadFromCookie(); 
    return (percent == null || percent == "") ? 0 : percent; 
} 


/******* Save *******/ 

function saveInStorage() { 
    localStorage.setItem("scrollPercent", (document.documentElement.scrollTop/getTotalHeight())); 
} 

function saveCookie() { 
    var expDate = new Date(); 
    expDate.setDate(expDate.getDate() + 7); // start over if it's been more than ___ days 
    document.cookie = "scrollPercent=" + (document.documentElement.scrollTop/getTotalHeight()) 
       + "; " + expDate;   
} 


/******* Load *******/ 

function loadFromStorage() { 
    return localStorage.getItem("scrollPercent"); 
} 

function loadFromCookie() { 
    return document.cookie.replace(/(?:(?:^|.*;\s*)scrollPercent\s*\=\s*([^;]*).*$)|^.*$/, "$1"); 
} 


/******* Remove *******/ 

function removeFromStorage() { 
    localStorage.removeItem("scrollPercent"); 
} 

function removeCookie() { 
    document.cookie = "scrollPercent=''"; 
} 


/******* Handler *******/ 

var saveButton = document.getElementById("saveButton"), 
    saved = document.getElementById("saved"); 

saveButton.onclick = function() { 
    storageSupported ? saveInStorage() : saveCookie(); 
    saved.style.visibility = "visible"; 
    setTimeout(function() { 
     saved.style.visibility = "hidden"; 
    }, 1500); 
}; 


/******* Logic *******/ 

var storageSupported = checkStorageSupport(), 
    percent = getSavedPercent(); 

if (percent > 0) { 
    if (confirm("Would you like to continue reading where you left off?")) { 
     document.documentElement.scrollTop = percent * getTotalHeight(); 
    } 
    storageSupported ? removeFromStorage() : removeCookie(); 
} 

---

注意：要回到生成解決方案（1）的代碼，從該演示覆制代碼。在這種情況下的jsfiddle下降，這裏有手動指令：

• 在「保存」功能
• 在「邏輯」部分刪除的/ getTotalHeight()每個實例，與position
• 更換position * getTotalHeight()刪除getTotalHeight()，因爲它不是用來
• 替換的「百分比」與「位置」更準確語義

Answer 2

基本思路是..

喜歡網頁上創建一個浮動書籤按鈕：

#mybookmark{ 
position: fixed; 
top:30px; 
right:0; 
} 

現在jQuery的..上點擊它時檢索該浮動書籤的位置..

$('#mybookmark').click(function(){ 
    var bookmark_loc = $('#mybookmark').offset().top(); 
}); 

將此bookmark_loc數據存儲在您的用戶首選存儲中。

然後當他們點擊一個按鈕，就可以滾動到您的存儲存儲的偏移值.. jQuery的

$('#scroll_to_bookmark').click(function{ 
var bookmark_loc = //Fetch bookmark 
$('body').animate({ scrollTop: bookmark_loc; }); 
});