重新加载页面上有哈希值

问题描述 投票:0回答:2

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

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

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

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

我的一些代码(简化代码)

当页面打开时,我这样做(并且它的工作):

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。

jquery hash reload
2个回答
0
投票

它对我有用

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

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

应该管用。


© www.soinside.com 2019 - 2024. All rights reserved.