重新加载页面上有哈希值

Posted 2021-05-05

我有锚和重装页面的问题。

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

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

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

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

当页面打开时，我这样做（并且它的工作）：

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。

答案

它对我有用

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

另一答案

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

它是否因为动态添加而出现？如果是这样，你的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();

应该管用。

---