Question

我想做到目前为止我所发现的相反。我用js设置了很多高度，我想在页面加载后导航到url中的hashtag。我猜这很简单，但我没有看到明显的答案......例如，请点击这里......

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

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

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

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

Answer 1

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

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

如果您想使用新哈希导航到网址：

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。

Answer 2

您可以设置当前位置：

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

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

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

Answer 3

你改变了你的问题。

查看此解决方案。 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();

});

Answer 4

由于某些原因，即使设置了新书签后执行window.location.reload(true)，MS Edge 42和IE 11都不会为我滚动到新书签。所以我想出了这个解决方案：在要加载的页面上插入此脚本（需要jquery）

$(document).ready(function() {
 var hash = window.location.hash;
 if (hash) {
  var elem = document.getElementById(hash.substring(1));
  if (elem) {
   elem.scrollIntoView();
  }
 }
});

Answer 5

使用scrollTo或scrollIntoView不会遵守:target css selector创建的任何偏移量，通常通过将页面设置为{{ 1}}中带有负数position: relative。

这将滚动到锚点，同时遵守top选择器：

:target

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

5 个答案: