當您向下滾動單頁時可能會更改網址

Question

當您使用ajax向下滾動單頁時可能會更改網址嗎？我有一個網站都在一個頁面上，並希望有這種效果。

例如：

www.blablabla.com/blog 

用戶向下滾動...

www.blablabla.com/blog/entry-name 

我知道哈希...我可以掩蓋網址是什麼？

Answer 1

不知道你爲什麼要這麼做。

正如你所提到的，唯一的辦法是將它添加到頁面的散列，例如。

http://www.website.com/blog/#entry-name 

然後滾動到頁面的一部分，是這樣的：

if (window.location.indexOf("#") > 0) { 
    var entry_id = window.location.substring(window.location.indexOf("#")); 
    $('html, body').animate({ 
     scrollTop: $(entry_id).offset().top 
    }, 2000); 
} 

編輯：這是長久以來可能與window.history.pushState。

Answer 2

沒有，出於安全原因，你不能使用JavaScript

Answer 3

是更改URL，就可以了，但它是一個有點棘手。

如果您有這方面的index.html頁：

<a id="link-to-later" href="#later">Go to later</a> 
    <p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p> 
    <a id="later" name="later">Some later anchor</a> 

然後點擊上面的鏈接將帶你到下面的錨無需重新加載頁面和URL將被index.html#later。

通過使用window.onscroll事件，您可以將事件掛接到向下滾動頁面的用戶。事件處理程序可能包含諸如$('#link-to-later').click()之類的內容，它會通過later定位點將用戶的瀏覽器指向該頁面。

您將需要做一些工作，以防止它太過波折，但它是可行的。

Answer 4

您可以使用pushState（）修改瀏覽器URL欄中顯示的URL，而無需重新加載或使用散列。只要你的瀏覽器支持HTML5即可。

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Answer 5

我知道這是一個有點舊的問題，但是瀏覽器改變了，而現在，這是可以做到的海報什麼要求。這意味着大多數其他答案不再有效。我正在發佈一種方法來完成此操作，以便它可以幫助使用Google的人找到正確的答案。

簡而言之，在現代瀏覽器（支持HTML 5的瀏覽器）上，您可以。請看this文章。

它基本上歸結爲下面的行的代碼：

window.history.pushState("object or string", "Title", "/new-url"); 

執行以上代碼將所述URL更改爲例子。com/new-url，並且會幫助你完成你想要的東西。

對於演示，您可以看看使用此方法的Webby Awards。只需向上或向下滾動，然後查看裸露的地址。效果非常令人印象深刻。

Answer 6

怎麼樣https://github.com/browserstate/history.js/history.js

，包括持續的數據，字幕，replaceState支持。支持jQuery，MooTools和Prototype。對於HTML5瀏覽器，這意味着您可以直接修改URL，而無需再使用散列值。