javascript 向下滚动单个页面时是否可以更改 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6146560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to have the url change while you scroll down a single page
提问by eptype
Is it possible to have the url change while you scroll down a single page with ajax? I have a website all on one page and want to have this effect.
使用ajax向下滚动单个页面时是否可以更改url？我在一个页面上有一个网站，并希望有这种效果。
example:
例子：
www.blablabla.com/blog
user scroll down...
用户向下滚动...
www.blablabla.com/blog/entry-name
I know about hashing... can I mask the URL?
我知道散列...我可以屏蔽 URL 吗？
回答by Erik Pragt
I know this is a bit of an older question, but browsers changed, and right now, it is possible to do what the poster requested. This means that most of the other answers are no longer valid. I'm posting a way to accomplish this so that it might help people using Google to find the correct answer.
我知道这是一个较旧的问题，但是浏览器发生了变化，现在，可以按照发布者的要求进行操作。这意味着大多数其他答案不再有效。我发布了一种方法来实现这一点，以便它可以帮助人们使用 Google 找到正确的答案。
In short, on modern browsers (browsers with HTML 5 support) you can. Please have a look at thisarticle.
简而言之，在现代浏览器（支持 HTML 5 的浏览器）上，您可以。请看看这篇文章。
It basically boils down to the following line of code:
它基本上归结为以下代码行：
window.history.pushState("object or string", "Title", "/new-url");
Executing the above code will change the URL to example.com/new-url, and will help you accomplish what you wanted.
执行上面的代码会将 URL 更改为 example.com/new-url，并将帮助您完成您想要的。
For a demo, you can take a look at the Webby Awards, where this method is used. Just scroll up or down and look at the address bare. The effect is pretty impressive.
对于演示，您可以查看使用此方法的Webby Awards。只需向上或向下滚动并查看地址即可。效果相当可观。
回答by lms
You can use pushState() to modify the URL displayed in the browser URL bar without reloading or using the hash. As long as your browser supports HTML5 that is.
您可以使用 pushState() 修改浏览器 URL 栏中显示的 URL，而无需重新加载或使用哈希。只要您的浏览器支持 HTML5。
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
回答by dtbarne
No. Not sure why you would want to either.
不。不知道你为什么想要。
As you mentioned, the only way would be to add it on to the page's hash, ex.
正如您所提到的，唯一的方法是将其添加到页面的哈希中，例如。
http://www.website.com/blog/#entry-name
Then to scroll to that part of the page, something like:
然后滚动到页面的那部分，例如：
if (window.location.indexOf("#") > 0) {
var entry_id = window.location.substring(window.location.indexOf("#"));
$('html, body').animate({
scrollTop: $(entry_id).offset().top
}, 2000);
}
EDIT: This is long since possible with window.history.pushState.
编辑：这很可能与window.history.pushState.
回答by MRRaja
what about https://github.com/browserstate/history.js/history.js
什么https://github.com/browserstate/history.js/ history.js
Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore.
包括对数据、标题、replaceState 的持续支持。支持 jQuery、MooTools 和 Prototype。对于 HTML5 浏览器，这意味着您可以直接修改 URL，而不再需要使用哈希。
回答by Jagdeesh Kumar
it is possible using window.pushState method.
可以使用 window.pushState 方法。
回答by smartcaveman
Yes, you can, but it's a little tricky.
是的，你可以，但这有点棘手。
If you have this on your index.htmlpage:
如果你的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>
Then clicking the top link will take you to the anchor below without reloading the page and the url will be index.html#later.
然后单击顶部链接将带您到下面的锚点，而无需重新加载页面，网址将为index.html#later.
By using the window.onscrollevent you can hook an event to the user scrolling down the page. The event handler could include something like $('#link-to-later').click(), which would send the user's browser to point on the page with the lateranchor.
通过使用该window.onscroll事件，您可以将事件挂钩到向下滚动页面的用户。事件处理程序可以包含类似 的内容$('#link-to-later').click()，它会将用户的浏览器发送到带有later锚点的页面上。
You will need to do some work to keep this from being too choppy, but it is doable.
您将需要做一些工作以防止它变得过于断断续续，但它是可行的。
回答by CodeMan
No, for security reasons you are not allowed to change the URL using javascript
不，出于安全原因，您不能使用 javascript 更改 URL
