使用jquery/javascript滾動更改網址

Question

我想在不使用＃的情況下滾動條時更改網址。這是我的代碼： -

<a class = "section" 
    href = "#first" > First paragraph < /a> <p> < /p> < a class = "section" 
    href = "#second" > Second paragraph < /a> <p> < /p> < a class = "section" 
    href = "#third" > Third paragraph < /a> <p> < /p> < a class = "section" 
    href = "#fourth" > Fourth paragraph < /a> 

    function isScrolledIntoView(elem) { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 
     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 
     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
    } 

    $(window).scroll(function(e) { 
     var anchors = $('.section'); 
     for (var i = 0; i < anchors.length; ++i) { 
      if (isScrolledIntoView(anchors[i])) { 
       var href = $(anchors[i]).attr('href'); 
       location.hash = href.slice(href.indexOf('#') + 1); 
       break; 
      } 
     } 
    }); 

    $(function() { 
     var hash = location.hash; 
     if (hash) { 
      // Scroll to the element with the given hash. 
      var anchors = $('.section'); 
      for (var i = 0; i < anchors.length; ++i) { 
       if ($(anchors[i]).attr('href') === hash) { 
        $(window).scrollTop($(anchors[i]).offset().top); 
        break; 
       } 
      } 
     } 
    }); 

當我運行這段代碼我的網址顯示是這樣的：

file:///C:/Users/jony/Desktop/demo.html#third 

，但我想說明這樣的：

file:///C:/Users/jony/Desktop/demo.html/third 

Answer 1

如果你想創建一個新的歷史記錄（即用戶可以點擊返回按鈕返回），使用

window.history.pushState(state, title, newURL); 

否則，使用

window.history.replaceState(state, title, newURL); 

如果你不知道做什麼用狀態和標題做，你可以通過空或空字符串。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history