jquery：hashchange，防止跳转到hash

jquery: hashchange, prevent jumping to hash

提问by user1374796

I have a hashchange function set up to show/hide different sections of an about page without having 7 separate pages. This all works fine, great infact, there's just one small thing that's bothering me, when the relevant content is shown on screen, eg: #about01if you click on the menu button again the browser jumps down to the top of this div, which I don't want to happen.
Here's my jQuery:

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

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>

Like I say, if #about01is shown, and the user then clicks on #sub-menu-01again, the window scrolls down to the top of this div, as is the normal behaviour for hashes in url's. Is the a way to prevent the default behaviour and not scroll to the top of this div on the click?
Also, I'm trying to figure out if there's a way to show #about01on the page load of www.website.com/aboutinstead of having to put in www.website.com/about/#about01etc?

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

采纳答案by gp.

problem is in your jquery.each block.

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

"return true" inside jquery.each block will not return but continue for next items. Also, this will not return from your determineContent function, so the next code for scroll will also be executed and determineContent will always return false.

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

use a flag e.g.

使用标志，例如

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.

回答by davids

Try this:

尝试这个：

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

The preventDefault()method of the event object will avoid, as its name shows, the default behavior to be executed on that event. Since you'd like to avoid the normal behavior when the hash changes, that code should do.

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

回答by Mike H.

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

    //do stuff
});

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

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

回答by Spokey

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

The preventDefault()should stop any default events that an element has.

该preventDefault()应停止任何违约事件是一个元素。

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

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