当你向下滚动一个页面时，是否可以更改url

Is it possible to have the url change while you scroll down a single page

本文关键字：是否 url 滚动 一个 当你      更新时间：2023-09-26

使用ajax向下滚动单个页面时，是否可以更改url？我有一个网站所有在一个页面上，并希望有这种效果。

示例：

www.blablabla.com/blog

用户向下滚动。。。

www.blablabla.com/blog/entry-name

我知道哈希。。。我可以屏蔽URL吗？

我知道这是一个有点老的问题，但浏览器发生了变化，现在，可以按照海报的要求执行了。这意味着大多数其他答案不再有效。我正在发布一种实现这一点的方法，以便帮助使用谷歌的人找到正确的答案。

简而言之，在现代浏览器（支持HTML5的浏览器）上，您可以。请看一下这篇文章。

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

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

执行上面的代码会将URL更改为example.com/new-URL，并将帮助您完成所需内容。

对于演示，您可以查看使用此方法的Webby Awards。只需向上或向下滚动，即可查看地址。效果非常令人印象深刻。

您可以使用pushState（）修改浏览器URL栏中显示的URL，而无需重新加载或使用哈希。只要你的浏览器支持HTML5，也就是.

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

否。也不知道你为什么想要。

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

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早就不可能做到这一点了

https://github.com/browserstate/history.js/history.js

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

使用window.pushState方法是可能的。

是的，你可以，但这有点棘手。

如果你的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锚的页面。

你需要做一些工作来避免这种情况过于动荡，但这是可行的。

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

相关文章：