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 块中。

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.

Answer 2

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

    //do stuff
});

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

Answer 3

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

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

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

Answer 4

试试这个：

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

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