Question

我在http://joelglovier.com上有一个脚本，可以在每个导航元素的文档中对应的部分添加一个“active”类。该脚本是从w3fools.com改编的with permission，因此编写时没有考虑我的场景。

不同之处在于，在w3fools.com上，导航链接仅引用页面上的元素，而在我的导航中，最后有一个元素引用新页面。

问题在于，我已经对其进行了调整，它适用于引用页面部分的链接。但是，由于某些原因我不知道（对不起 - JS / jQuery新手）它阻止浏览器跟随到新页面的链接（博客链接）。

我尝试阅读代码并了解脚本正在做什么 - 但我似乎无法理解为什么它阻止外部链接被点击，或者更具体地说是如何修复它。

有人可以提出最简单的方法来解决我的问题，而不会破坏脚本的原始功能吗？

或者...

标记：

<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

你试图告诉它滚动到当前页面上不存在的“http：// ...”，因此它失败并且什么都不做。

如果您将代码更改为此

，它应该有效

// 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' );
    }
});

为什么我的javascript阻止浏览器转到链接

1 个答案: