jQuery: hashchange，防止跳转到哈希值

Question

我设置了一个哈希改变函数，可以在不使用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时，窗口会滚动到此

的顶部，这是url中哈希标记的正常行为。有没有一种方法可以防止默认行为，在单击时不滚动到此

的顶部？
此外，我正在尝试找出是否有一种方法可以在www.website.com/about页面加载时显示#about01，而无需输入www.website.com/about/#about01等内容？

- user1374796

Answer 1

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

jquery.each块内的"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.

- gp.

Answer 2

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

    //do stuff
});

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

- Mike H.

Answer 3

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

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

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

- Spokey

Answer 4

试试这个：

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

事件对象的preventDefault()方法可以避免默认行为在该事件上被执行，正如其名称所示。由于您希望在哈希值更改时避免正常行为，因此应使用该代码。

- davids

---

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

@user1374796 我用你的代码写了一个 JSFiddle，但是无法重现问题。你能否修改一下代码，以便我能够给出更准确的答案？http://jsfiddle.net/dnsxf/1/ - davids

谢谢，我已经更新了：http://jsfiddle.net/dnsxf/2/ 我将子菜单的高度设置得非常高，这样你就可以看到，如果你两次点击 .sub-menu，浏览器会滚动到 div，这不是我想要的。 - user1374796

发生的情况是每次单击这些链接之一时，都会执行jQuery('html, body').animate({scrollTop:0}, 'slow');这行代码。这就是窗口滚动到顶部的原因。删除该行代码即可解决问题http://jsfiddle.net/dnsxf/3/。 - davids

我觉得你误解了，那正是我想要的，滚动到浏览器顶部，而不是滚动到带有哈希标记的 div 的顶部，因为它确实会这样做。 - user1374796