瀏覽器后退按鈕不適用於錨鏈接

Question

在我頁面的頁腳中，有一些鏈接使用錨標記（# 附加到頁面的 URL）指向同一頁面上的不同部分。

這工作正常，只是瀏覽器后退按鈕不起作用：我無法從導航到錨定頁面的位置移回上一頁。

這里的簡單問題是，在錨定頁面中導航幾次后是否可以返回上一頁？ 如果是，那么請你建議如何？

錨定頁面：具有多個由 id 屬性標記的部分的頁面，這些部分可以由末尾帶有#anchorId的 URL #anchorId 。

Answer 1

我也遇到了同樣的問題，請參閱我的問題錨鏈接，這些鏈接指的是無法在瀏覽器刷新、后退和前進中工作的頁面部分

但是我必須按照普通鏈接的工作方式來做，所以我所做的是通過從散列中獲取元素來手動轉到該部分。

$(window).on('hashchange', function () 
{
    var top = $(window.location.hash).offset().top;
    $(window).scrollTop(top);
});

這適用於前進和后退按鈕。 對於刷新，您也需要做同樣的事情。 從散列中獲取元素並手動滾動到該元素。

Answer 2

歷史和后退按鈕。

在過去，后退按鈕的作用與瀏覽器歷史記錄中的前一項相比幾乎沒有。 從那時起，情況發生了很大變化，因為它根據一組稍微簡單的規則保留了自己的歷史記錄。 祝你好運挖掘標准文檔找到它。

UI/UX 以及為什么不改變預期行為。

請參考w3c 的“在更改瀏覽器的默認行為之前不要破壞后退按鈕” 。 出於某種原因，經過大量的辯論和定義標准，這樣做是有原因的。

歸根結底，這就是瀏覽器所做的，這也是用戶所期望的。 如果你開始顛覆用戶期望的行為，你很可能會開始激怒你的用戶。 當按鈕和鏈接反復出現不符合預期的行為時，用戶通常會放棄並離開您的網站。

防止違約。

如果你真的必須改變默認行為，使用 javascript 將是最好的方法：

<a href="#id" onclick="return gotoAnchor(this);">

<script>
function gotoAnchor(elm) {
    window.event.returnValue = false;
    var url = location.href;

    location.href = elm.href;
    history.replaceState(null,null,url);

    return false;
}
</script>

Answer 3

http://www.the-art-of-web.com/javascript/remove-anchor-links/

訪問那個網站。 滾動到底部並使用測試錨點。 它正在做你想做的事。

“以下代碼將解析您的 HTML 頁面並覆蓋以同一頁面上的錨點為目標的任何鏈接的功能。鏈接功能將被替換為對目標元素的 scrollIntoView 方法的調用：

document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("A");
  for(var i=0; i < links.length; i++) {
    if(!links[i].hash) continue;
    if(links[i].origin + links[i].pathname != self.location.href) continue;
    (function(anchorPoint) {
      links[i].addEventListener("click", function(e) {
        anchorPoint.scrollIntoView(true);
        e.preventDefault();
      }, false);
    })(document.getElementById(links[i].hash.replace(/#/, "")));
  }
}, false);

Answer 4

if (document.referrer == "") {
window.open("index.php");
} else {
    window.history.go(-1);
    return false;
}