页面加载后如何导航到主题标签？答案

【问题标题】：How do I navigate to hashtag after page load?页面加载后如何导航到主题标签？
【发布时间】：2013-01-15 22:36:56
【问题描述】：

我想做与我目前所发现的相反的事情。我用 js 设置了很多高度，我想在页面加载后导航到 url 中的主题标签。我猜这很简单，但我没有看到明显的答案...例如，请在此处查看...

http://alavita.rizenclients.com/#story

使用代码尝试过这个...

$(window).load(function() {
    var hashTag = window.location.hash;
    window.location = '/' + hashTag;
});

实际上并没有将我带到标记部分的顶部...

【问题讨论】：

我最终使用 yepnope 链接一个函数。在填充内容之前，jQuery 正在获取哈希标签的偏移值。我刚刚混合了你们帮助完成的代码。

标签： javascript hashtag

【解决方案1】：

如果您只是想在页面加载后更改哈希：

window.onload = function (event) {
    window.location.hash = "#my-new-hash";
};

如果您想导航到带有新哈希的 URL：

window.location.href = "http://website.com/#my-new-hash";

如果你想监听 URL 哈希的变化；您可以考虑使用window.onhashchange DOM 事件。

window.onhashchange = function () {
    if (location.hash === "#expected-hash") {
        doSomething();
    }
};

~~但目前还不是所有主流浏览器都支持它。~~它现在有一个广泛的browser support。您还可以通过每隔一小段时间轮询window.location.hash 来检查更改，但这也不是很有效。

对于跨浏览器解决方案；我建议 Ben Alman's jQuery hashchange plugin 将这些方法和其他一些方法与回退机制结合起来。

编辑：在您的问题更新后，我知道您希望页面滚动到书签？：

您可以使用Element.scrollTop 或jQuery 的$.scrollTop() 方法。

$(document).ready(function (event) {
    var yOffset = $("#my-element").offset().top;
    $("body").scrollTop(yOffset);
});

请参阅文档here。

【讨论】：

【解决方案2】：

由于某种原因，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();
  }
 }
});

【讨论】：

【解决方案3】：

使用scrollTo 或scrollIntoView 将不遵守:target css selector 创建的任何偏移量，这通常用于使页面滚动到锚点上方，方法是将其设置为position: relative 和负数@987654326 @。

这将滚动到锚点，同时尊重:target 选择器：

if (location.hash) {
    window.location.replace(location.hash);
}

【讨论】：

【解决方案4】：

你可以设置当前位置：

window.location = 'http://alavita.rizenclients.com/#story';

或者设置哈希（如果还没有），然后重新加载：

window.location.hash = hashTag;
window.location=window.location.href;

【讨论】：

甚至运行这段代码： [code]$(window).load(function() { var hashTag = window.location.hash; window.location = '/' + hashTag; });实际上并没有把我带到标记部分的顶部......

【解决方案5】：

你改变了你的问题。

查看此解决方案。 https://stackoverflow.com/a/2162174/973860 让您了解发生了什么以及如何实现跨浏览器解决方案。

注意：在底部，他提到了一个 jquery 插件，可以满足您的需求。

http://benalman.com/projects/jquery-hashchange-plugin/

这个插件可以让你做这样的事情。这将适用于您当前的页面。但您可能希望将其修改为更健壮。

$(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();

});

【讨论】：