向下滚动单个页面时是不是可以更改 url

Posted 2023-02-22

【中文标题】向下滚动单个页面时是不是可以更改 url

【英文标题】：Is it possible to have the url change while you scroll down a single page向下滚动单个页面时是否可以更改 url

【发布时间】：2011-09-03 01:04:24

【问题描述】：

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

示例：

www.blablabla.com/blog

用户向下滚动...

www.blablabla.com/blog/entry-name

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

【问题讨论】：

我很想知道这是怎么回事，但我的直觉是这是一个不好的做法。因此，如果我正在查看上述 blabla 博客主页并向下滚动几篇文章，我的地址栏将动态更改，以便当我将该 URL 复制并粘贴给朋友时，他们将在相同的书签/滚动位置看到该页面?

是的，这就是我希望发生的事情。

这个最好用手指交叉...

我发现了这个：jqueryfordesigners.com/demo/scroll-link-nav.html#third 但我觉得它可能不适用于包含大量内容的页面。

我在 chrome 中检查了这一点，但在我滚动时它并没有改变 url，只是明显地改变了链接按钮 css，这很酷......我猜。

【参考方案1】：

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

简而言之，在现代浏览器（支持 HTML 5 的浏览器）上您可以。请看this的文章。

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

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

执行上述代码会将 URL 更改为 example.com/new-url，并将帮助您完成您想要的。

对于演示，您可以查看使用此方法的Webby Awards。只需向上或向下滚动并查看地址即可。效果相当可观。

【讨论】：

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

【参考方案2】：

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

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

【参考方案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 早就可以做到这一点。

【讨论】：

我希望这样做，以便在共享博客文章时将其定位在页面上的正确位置。

这样我就可以将该网址从 www.homepage.com/blog/#entryname 屏蔽为 www.homepage.com/blog/entryname

请查看winners.webbyawards.com/2013/online-film-video/… 或下面我的回答，然后向上或向下滚动。所以是的，这当然是可能的。再说一次，现在是 2013 年 ;)

【参考方案4】：

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

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

【参考方案5】：

可以使用 window.pushState 方法。

【参考方案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 锚点的页面。

你需要做一些工作来避免太不稳定，但这是可行的。

【讨论】：

之前没有看到 @dtbarne 的答案 - 检查一下

【参考方案7】：

不，出于安全原因，您不能使用 javascript 更改 URL

【讨论】：

其实不刷新是不能改的。

通过更改 URL，您可以欺骗用户，让他们认为他们在一个网站上，而实际上他们不是。就像他们访问 www.blablabla.com/blog 并且您将 URL 更改为 www.yourbank.com 他们可能认为他们实际上正在查看他们的银行网站。