重新加载带有哈希的页面答案

【问题标题】：Reload page with hash on it重新加载带有哈希的页面
【发布时间】：2015-11-08 01:21:21
【问题描述】：

我有锚和重新加载页面的问题。

当我们打开我的页面时，我们转到一个锚点跳过标题并直接进入内容（因为动画开始在内容中，我希望用户看到它）

动画停止后，会出现一个按钮来重播相同的动画。所以我想重新加载页面，并与我们打开页面时相同的锚点，但是当我们点击时，它们会转到页面顶部。

我有一个带有重新加载页面按钮的页面（在我的情况下，重新加载页面重新启动我页面上的动画，因为动画在我们进入页面时开始）

我的一些代码（简化代码）

当页面打开时，我会这样做（并且有效）：

window.location.hash = '#container';

按钮（出现在动画之后）：

HTML：

    <button class="bouton blanc bouton-laureats rejouer"><img src="assets/imgs/rejouer.png" />Rejouer</button>

jQuery：

$('.page-gagnants-animation .rejouer').on('click', function(){
    window.location.hash = '#container';
    window.location.reload();
 });

当我单击它时，我会转到页面顶部，但我想直接转到#container（内容）。我已经在这里，但想留在#container。

【问题讨论】：

【解决方案1】：

按钮（出现在动画之后）：

它出现是因为它是动态添加的吗？如果是这样，你的 jquery 触发器就有点不对了。

$('.page-gagnants-animation .rejouer').on('click', function(){

应该是

$('.page-gagnants-animation').on('click', " .rejouer", function(){

因为.on 不会监视整个 DOM 以查找新添加的元素，所以您必须告诉它在哪里查找。

或者，如果您真的无法让 javascript 以您期望的方式执行，为什么不使用一个好的老式锚标记？

<button class="bouton blanc bouton-laureats rejouer">
    <a href="#container"><img src="assets/imgs/rejouer.png" />Rejouer</a>
</button>

另外，您不必担心任何浏览器上的 javascript 支持，因为几乎所有浏览器都支持这一点。

编辑，我的原始答案（如下）不是真的。如果您愿意，可以包含 #。

当您使用 window.location.hash 时，您不包括 #。

window.location.hash = 'container';
window.location.reload();

应该可以。

【讨论】：

【解决方案2】：

它对我有用

<a href="pagelink#hashcontent" onclick="window.location.reload()">Reload</a>

【讨论】：