当你滚动单个页面时，是否可能更改URL？

Question

在使用 AJAX 的情况下，当您滚动页面时是否可以更改 URL？我有一个全部在单个页面上的网站，想要使用这种效果。

举个例子：

www.blablabla.com/blog

用户向下滚动...

www.blablabla.com/blog/entry-name

我知道哈希的用途...但我能掩盖URL吗？

- eptype

---

我很好奇这会走向何方，但我的直觉告诉我这是一种不好的做法。所以，如果我正在查看所述 blabla 博客主页并向下滚动多篇文章，我的地址栏将动态更改，因此当我将该 URL 复制并粘贴给朋友时，他们将在相同的书签/滚动位置看到该页面？ - pixelbobby

是的，这就是我想要发生的。 - eptype

这个可能需要祈求好运了... - pixelbobby

我找到了这个链接：http://jqueryfordesigners.com/demo/scroll-link-nav.html#third 但是我觉得它可能无法很好地处理有大量内容的页面。 - eptype

我在Chrome中检查了一下，但是随着我的滚动，它并没有改变URL，只是可见地改变了链接按钮的CSS，这很酷......我猜。 - pixelbobby

你现在可以了。请查看下面的答案。 - Erik Pragt

Answer 1

我知道这是一个比较老的问题，但是浏览器已经发生了变化，现在可以实现提问者所请求的功能。这意味着大多数其他答案不再有效。我发布一种方法来完成这个任务，希望可以帮助那些使用谷歌寻找正确答案的人。

简而言之，在现代浏览器（支持HTML 5的浏览器）中，您可以实现此功能，请参考此文章。

它基本上可以归结为以下代码：

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

执行上述代码将更改URL为example.com/new-url，并帮助您实现所需的功能。

您可以查看Webby Awards进行演示，该方法已被使用。只需向上或向下滚动并查看地址栏即可。效果非常令人印象深刻。

- Erik Pragt

---

谢谢你的回答。这正是我一直在寻找的。另一个不错的例子：rollingstone.com/music/lists/15-great-albums-you-didnt-hear-in-2014-20141217 - Herr_Schwabullek

Answer 2

如果您的浏览器支持HTML5，您可以使用pushState()方法来修改浏览器URL栏中显示的URL，而无需重新加载或使用哈希。

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

- lmirosevic

Answer 3

不。我不确定为什么您要这样做。

正如您所提到的，唯一的方法是将其添加到页面的哈希中，例如：

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已经可以实现这个功能。

- dtbarne

---

我想这样做，这样当博客文章被分享时，它会在页面的正确位置定位。 - eptype

所以我可以将URL从www.homepage.com/blog/#entryname掩盖为www.homepage.com/blog/entryname。 - eptype

请查看http://winners.webbyawards.com/2013/online-film-video/general-film-categories/drama或者查看下方的回答，向上或向下滚动页面即可。是的，这当然是可能的。不过话说现在已经是2013年了;) - Erik Pragt

Answer 4

可以使用 window.pushState 方法实现。

- Jagdeesh Kumar

Answer 5

关于https://github.com/browserstate/history.js/history.js怎么样？

它包括对数据、标题和replaceState的持续支持。支持jQuery、MooTools和Prototype。对于HTML5浏览器，这意味着您可以直接修改URL，而无需再使用哈希。

- MRRaja

Answer 6

可以，但有点棘手。

如果您在 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 锚点。

您需要做一些工作来避免这种情况过于卡顿，但这是可行的。

- smartcaveman

---

之前没有看到@dtbarne的答案 - 去看一下那个。 - smartcaveman

Answer 7

出于安全原因，您不允许使用JavaScript更改URL。

- CodeMan

---

实际上，您不能在不刷新的情况下更改它。 - Bakudan

通过更改 URL，你可以欺骗用户认为他们正在访问的是一个实际上并非如此的网站。比如他们访问了 www.blablabla.com/blog，而你将 URL 更改为 www.yourbank.com，他们可能会相信自己正在浏览他们的银行网站。 - CodeMan