jquery: hashchange, prevent jumping to hash

Question

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: #about01 if 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:

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>

Like I say, if #about01 is shown, and the user then clicks on #sub-menu-01 again, 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 #about01 on the page load of www.website.com/about instead of having to put in www.website.com/about/#about01 etc?

score 1 · Accepted Answer · answered Apr 11 '13 at 14:00

problem is in your jquery.each block.

"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.

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.

score 0 · Answer 2 · answered Apr 11 '13 at 13:38

0

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

    //do stuff
});

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

answered Apr 11 '13 at 13:38

Mike H.

1,731
9
31

score -1 · Answer 3 · answered Apr 11 '13 at 13:38

-1

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

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

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

answered Apr 11 '13 at 13:38

Spokey

10,974
2
28
44

score -1 · Answer 4 · answered Apr 11 '13 at 13:38

-1

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.

answered Apr 11 '13 at 13:38

davids

6,259
3
29
50

6

unfortunately not, this didn't seem to work, the browser still scrolls to the relevant div if clicked twice? – user1374796 Apr 11 '13 at 13:50
@user1374796 I wrote a fiddle with your code, but am not able to reproduce de issue. Could you modify it so that I can give you a more accurate answer? http://jsfiddle.net/dnsxf/1/ – davids Apr 11 '13 at 13:57
thanks for that, I've updated it: http://jsfiddle.net/dnsxf/2/ I've made the sub menus really high so you can see that if you click a `.sub-menu` twice the browser scrolls to the div, which isn't what i want – user1374796 Apr 11 '13 at 14:02
What is happening is that every time you click on one of those links, the line `jQuery('html, body').animate({scrollTop:0}, 'slow');` gets executed. That is the reason why the window scrolls to top. Removing that line would solve it http://jsfiddle.net/dnsxf/3/ – davids Apr 11 '13 at 14:12
i think you misunderstood, that's what I want, to scroll to the top of the browser, not to scroll to the top of the div with the hash as it does do – user1374796 Apr 11 '13 at 14:13

jquery: hashchange, prevent jumping to hash

4 Answers4