Question

I have a script on http://joelglovier.com to add a class of “active” to each navigation element when it’s corresponding section in the document. The script is adapted with permission from w3fools.com, so it was written without my scenario in mind.

The difference is that on w3fools.com, the nav links only refer to elements on the page, whereas in my navigation, there is one element at the end that refers to a new page.

The problem is that as I have adapted it, it works fine for the links that refer to sections on the page. However, for some reason unbeknownst to me (sorry – JS/jQuery novice) it is blocking the browser from following the link to the new page (the Blog link).

I tried reading through the code and understanding what the script is doing – however I cannot seem to understand why it is blocking that external link from being clicked, or more specifically how to fix it.

Can anybody suggest the simplest way to remedy my issue without breaking the original functionality of the script for it’s purpose?

See it live here: http://joelglovier.com

Or…

Markup:

<div id="site-nav">

<div class="wrap">

    <nav id="nav-links">

            <a href="#jag-home" class="section-link scroll top">Top</a>

            <a href="#background-section" class="section-link scroll skills">Background</a>

            <a href="#projects-section" class="section-link scroll projects">Projects</a>

            <a href="#random-section" class="section-link scroll random">Random</a>

            <a href="#site-footer" class="section-link scroll credits">Credits</a>

            <a href="http://blog.joelglovier.com" class="section-link blog" title="my tumblr">Blog <span class="icon"></span></a>

    </nav>

</div>

Javascript:

(function($) {
  $(function() {

    var $nav = $('#nav-links'),
        $navLinks = $nav.find('a.scroll'),
        cache = {};
        $docEl = $( document.documentElement ),
        $body = $( document.body ),
        $window = $( window ),
        $scrollable = $body; // default scrollable thingy, which'll be body or docEl (html) 

    // find out what the hell to scroll ( html or body )
    // its like we can already tell - spooky
    if ( $docEl.scrollTop() ) {
        $scrollable = $docEl;
    } else {
        var bodyST = $body.scrollTop();
        // if scrolling the body doesn't do anything
        if ( $body.scrollTop( bodyST + 1 ).scrollTop() == bodyST) {
            $scrollable = $docEl;
        } else {
            // we actually scrolled, so, er, undo it
            $body.scrollTop( bodyST - 1 );
        }
    }       

    // build cache
    $navLinks.each(function(i,v) {
        var href =  $( this ).attr( 'href' ),
            $target = $( href );
        if ( $target.length ) {
            cache[ this.href ] = { link: $(v), target: $target };
        }
    });

    // handle nav links
    $nav.delegate( 'a', 'click', function(e) {
    //  alert( $scrollable.scrollTop() );
        e.preventDefault(); // if you expected return false, *sigh*
        if ( cache[ this.href ] && cache[ this.href ].target ) {
            $scrollable.animate( { scrollTop: cache[ this.href ].target.position().top }, 600, 'swing' );
        }
    });

    // auto highlight nav links depending on doc position
    var deferred = false,
        timeout = false, // so gonna clear this later, you have NO idea
        last = false, // makes sure the previous link gets un-activated
        check = function() {
            var scroll = $scrollable.scrollTop(),
                height = $body.height(),
                tolerance = $window.height() * ( scroll / height );

            $.each( cache, function( i, v ) {
                // if we're past the link's section, activate it
                if ( scroll + tolerance >  v.target.position().top  ) {
                    last && last.removeClass('active');
                    last = v.link.addClass('active');
                } else {
                    v.link.removeClass('active');
                    return false; // get outta this $.each
                }
            });

            // all done
            clearTimeout( timeout );
            deferred = false;
        };

    // work on scroll, but debounced
    var $document = $(document).scroll( function() {
        // timeout hasn't been created yet
        if ( !deferred ) {
            timeout = setTimeout( check , 250 ); // defer this stuff
            deferred = true;
        }
    });

    // fix any possible failed scroll events and fix the nav automatically
    (function() {
        $document.scroll();
        setTimeout( arguments.callee, 1500 );
    })(); 

});

})(jQuery);

Answer 1

You’re trying to tell it to scroll to “http://…” which doesn’t exist on the current page, so it fails and does nothing.

It should work if you change your code to this

// handle nav links
$nav.delegate( 'a', 'click', function(e) {
//  alert( $scrollable.scrollTop() );
    e.preventDefault(); // if you expected return false, *sigh*
    if ( cache[ this.href ] && cache[ this.href ].target ) {
        // preserve http:// links
        if (this.href.substr(0, "http://".length) == 'http://')
            location.href = this.href;
        else
            $scrollable.animate( { scrollTop: cache[ this.href ].target.position().top }, 600, 'swing' );
    }
});