jquery：hashchange，防止跳转到hash

Posted 2023-04-13

【中文标题】jquery：hashchange，防止跳转到hash

【英文标题】：jquery: hashchange, prevent jumping to hash

【发布时间】：2013-04-03 17:38:44

【问题描述】：

我设置了一个 hashchange 函数来显示/隐藏关于页面的不同部分，而没有 7 个单独的页面。这一切都很好，事实上，只有一件小事困扰着我，当相关内容显示在屏幕上时，例如：#about01 如果你再次点击菜单按钮，浏览器会跳到这个 div 的顶部，我不想发生这种情况。 这是我的 jQuery：

jQuery(document).ready(function()

    jQuery(window).on('hashchange', function()
        var hashFound = determineContent();
        if(hashFound) return false;
    );

    function determineContent()

        var hash = window.location.hash;
        jQuery('.about').hide();

        jQuery('.sub-menu').each(function()

             if (jQuery(this).attr('hook') === hash.replace('#about', '')) 
               jQuery('#about'+jQuery(this).attr('hook')).fadeIn();
                 return true;
             
        );

        jQuery('html, body').animate(scrollTop:0, 'slow');
        return false;
    

    determineContent();
);

HTML：

<div id="sub-menu">
        <li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">TEST</a></li>
        <li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">TEST</a></li>
        <li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">TEST</a></li>
        <li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">TEST</a></li>
        <li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">TEST</a></li>
        <li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">TEST</a></li>
        <li id="sub-menu-07" class="sub-menu" hook="07"><a href="#about07">TEST</a></li>
    </div>

<div id="about01" class="about">CONTENT HERE
</div>

<div id="about02" class="about">CONTENT HERE
</div>

<div id="about03" class="about">CONTENT HERE
</div>

<div id="about04" class="about">CONTENT HERE
</div>

<div id="about05" class="about">CONTENT HERE
</div>

<div id="about06" class="about">CONTENT HERE
</div>

<div id="about07" class="about">CONTENT HERE
</div>

就像我说的，如果显示#about01，然后用户再次单击#sub-menu-01，窗口将向下滚动到该div 的顶部，这与url 中的哈希值的正常行为一样。是否有一种方法可以防止默认行为并且在单击时不滚动到该 div 的顶部？ 另外，我想知道是否有办法在www.website.com/about 的页面加载上显示#about01 而不必输入www.website.com/about/#about01 等？

【参考方案1】：

问题出在您的 jquery.each 块中。

jquery.each 块中的“return true”不会返回，但会继续下一项。 此外，这不会从您的确定内容函数返回，因此滚动的下一个代码也将被执行，并且确定内容将始终返回 false。

使用标志，例如

var found = false;
JQuery.each(function()
   if(found) return;
   //if your condition is true then found = true
)

if(found) return true;
//else continue the next line.

【参考方案2】：

$("#id").click(function(event) 
    event.preventDefault();

    //do stuff
);

http://api.jquery.com/event.preventDefault/

【参考方案3】：

$('a').click(function(event)
    event.preventDefault();
);

preventDefault() 应该停止元素具有的任何默认事件。

http://api.jquery.com/event.preventDefault/

【参考方案4】：

试试这个：

jQuery(window).on('hashchange', function(e)
    e.preventDefault();
    var hashFound = determineContent();
    if(hashFound) return false;
);

正如其名称所示，事件对象的preventDefault() 方法将避免对该事件执行的默认行为。由于您希望在哈希更改时避免正常行为，因此该代码应该这样做。

【讨论】：

很遗憾没有，这似乎不起作用，如果点击两次浏览器仍然会滚动到相关的 div？

@user1374796 我用你的代码写了一个小提琴，但我无法重现问题。你能修改一下，以便我给你一个更准确的答案吗？ jsfiddle.net/dnsxf/1

谢谢，我已经更新了它：jsfiddle.net/dnsxf/2 我已经把子菜单设置得很高，所以你可以看到，如果你点击 .sub-menu 两次，浏览器会滚动到 div，这不是我想要的

发生的情况是，每次您单击其中一个链接时，都会执行 jQuery('html, body').animate(scrollTop:0, 'slow'); 行。这就是窗口滚动到顶部的原因。删除该行将解决它jsfiddle.net/dnsxf/3

我想你误会了，这就是我想要的，滚动到浏览器的顶部，而不是像它那样滚动到带有哈希的 div 的顶部