jquery: hashchange，防止跳转到hash

Question

我设置了一个 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 等等？

Answer 1

问题出在你的 jquery.each block 中。

jquery.each block 中的“return true”不会返回，而是继续下一个元素。此外，这不会从您的 determineContent 函数返回，因此下一个滚动代码也将被执行并且 determineContent 将始终返回 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.