Javascript 页面加载后如何导航到主题标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14348233/
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
How do I navigate to hashtag after page load?
提问by brunam
I want to do the inverse of what I've been finding so far. I'm setting a lot of heights with js and I want to navigate to the hashtag in the url after the page has loaded. I'm guessing this is simple but I'm not seeing the obvious answer... for an example, check here...
我想做与迄今为止我发现的相反的事情。我用 js 设置了很多高度，我想在页面加载后导航到 url 中的主题标签。我猜这很简单，但我没有看到明显的答案...例如，请查看此处...
http://alavita.rizenclients.com/#story
http://alavita.rizenclients.com/#story
Attempted this using the code...
尝试使用代码...
$(window).load(function() {
var hashTag = window.location.hash;
window.location = '/' + hashTag;
});
doesn't actually take me to the top of the tagged section...
实际上并没有将我带到标记部分的顶部......
回答by Onur Y?ld?r?m
If you simply want to change the hash after page loads:
如果您只想在页面加载后更改哈希：
window.onload = function (event) {
window.location.hash = "#my-new-hash";
};
If you want to navigate to the URL with new hash:
如果要导航到具有新哈希的 URL：
window.location.href = "http://website.com/#my-new-hash";
If you want to listen for changes in the hash of the URL; you can consider using the window.onhashchangeDOM event.
如果你想监听 URL 哈希值的变化；你可以考虑使用window.onhashchangeDOM 事件。
window.onhashchange = function () {
if (location.hash === "#expected-hash") {
doSomething();
}
};
But it is not supported by every major browser yet.It now has a wide browser support. You can also check for changes by polling the window.location.hashon small intervals, but this is not very efficient either.
但并不是所有主流浏览器都支持它。它现在拥有广泛的浏览器支持。您还可以通过轮询window.location.hash小间隔来检查更改，但这也不是很有效。
For a cross-browser solution; I would suggest Ben Alman's jQuery hashchange pluginthat combines these methods and a few others with a fallback mechanism.
对于跨浏览器解决方案；我建议Ben Alman 的jQuery hashchange 插件将这些方法和其他一些方法与回退机制结合起来。
EDIT: After your question update, I understand you want the page to scroll to a bookmark?:
编辑：在您的问题更新后，我知道您希望页面滚动到书签？：
You can use Element.scrollTopor jQuery's $.scrollTop()method.
您可以使用Element.scrollTop或 jQuery 的$.scrollTop()方法。
$(document).ready(function (event) {
var yOffset = $("#my-element").offset().top;
$("body").scrollTop(yOffset);
});
See documentation here.
请参阅此处的文档。
回答by Rudiger W.
For some reason both MS Edge 42 and IE 11 will not scroll to the new bookmark for me, even when doing a window.location.reload(true)after setting the new bookmark. So I came up with this solution: insert this script on the page you're loading (requires jquery)
出于某种原因，MS Edge 42 和 IE 11 都不会为我滚动到新书签，即使window.location.reload(true)在设置新书签后执行操作也是如此。所以我想出了这个解决方案：在你正在加载的页面上插入这个脚本（需要 jquery）
$(document).ready(function() {
var hash = window.location.hash;
if (hash) {
var elem = document.getElementById(hash.substring(1));
if (elem) {
elem.scrollIntoView();
}
}
});
回答by Justin Bicknell
You could just set the current location:
您可以设置当前位置：
window.location = 'http://alavita.rizenclients.com/#story';
Or set the hash (if it isn't already), then reload:
或者设置散列（如果还没有），然后重新加载：
window.location.hash = hashTag;
window.location=window.location.href;
回答by mwoods79
You changed your question.
你改变了你的问题。
Check out this solution. https://stackoverflow.com/a/2162174/973860so you understand what is going on and how to implement a cross browser solution.
看看这个解决方案。 https://stackoverflow.com/a/2162174/973860以便您了解正在发生的事情以及如何实施跨浏览器解决方案。
NOTICE: At the bottom he mentions a jquery plugin that will do what you need.
注意：在底部，他提到了一个 jquery 插件，它可以满足您的需求。
http://benalman.com/projects/jquery-hashchange-plugin/
http://benalman.com/projects/jquery-hashchange-plugin/
This plugin will allow you to do something like this. This will work for your current page. But you may want to modify it to be more robust.
这个插件将允许你做这样的事情。这将适用于您当前的页面。但是您可能希望对其进行修改以使其更加健壮。
$(function(){
// Bind the event.
$(window).hashchange( function(){
// get the hash
var hash = window.location.hash;
// click for your animation
$('a[href=' + hash + ']').click();
})
// Trigger the event (useful on page load).
$(window).hashchange();
});
