Scrollspy - 将导航栏页面链接到外部 url 时页面混乱答案

【问题标题】：Scrollspy - Page messing up when linking nav bar page to outside urlScrollspy - 将导航栏页面链接到外部 url 时页面混乱
【发布时间】：2017-05-31 18:22:12
【问题描述】：

我需要有关 JQuery 的帮助，我相信这可能是显而易见的解决方案，但我不知道该怎么做。关于滚动页面上的导航栏，我希望导航栏上的链接之一转到外部页面（而不是页面中的某个部分）。它会这样做，但会弄乱滚动页面（背景移动到错误的部分等）。我相信我必须更改 refElement 但我不确定.. 请帮助 :( 谢谢

/*=========================================================================
        Navbar ScrollSpy
    =========================================================================*/
    var scrollPos = $(document).scrollTop(),
        nav_height = $('#navbar').outerHeight();

    $('.navbar li a').each(function () {
        var currLink = $(this),
            refElement = $(currLink.attr('href'));
        if( refElement.size() > 0 ){
            if ( ( refElement.position().top - nav_height ) <= scrollPos ) {
                $('.navbar li').removeClass('active');
                currLink.closest('li').addClass('active');
            }else{
                currLink.removeClass('active');
            }
        }
    });


});


//Initialize smoothscroll plugin
smoothScroll.init({
    updateURL: false
});

------------------HTML----------------- ---------------

<nav class="navbar navbar-fixed-top">
<div class=container>
    <div class=navbar-header>
        <button aria-expanded=false class="collapsed navbar-toggle" data-target=#nav-collapse data-toggle=collapse type=button><span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span></button>
    </div>
    <div class="collapse navbar-collapse" id=nav-collapse>
        <ul class="nav navbar-nav navbar-right">
            <li class=active><a href=#intro data-scroll>Home</a>
                <li><a href=#features-3 data-scroll>Marine</a>
                    <li><a href=#features-4 data-scroll>Industrial</a>
                        <li><a href=#contact data-scroll>Contact</a>
                            <li><a href="https://www.example.com" data-target>Careers</a></ul>

    </div>
</div>

【问题讨论】：

标签： javascript jquery scroll nav scrollspy

【解决方案1】：

做了一些更多的挖掘，发现这个 sn-p 有效。谢谢

/**
 * Scroll Spy via Bootstrap
 */
$('body').scrollspy({target: "#nav_wrapper", offset:50});

/**
 * Scroll Spy meet WordPress menu.
 */
// Only fire when not on the homepage
if (window.location.pathname !== "/") {
    // Selector for top nav a elements
    $('#top_main_nav a').each( function() {
        if (this.hash.indexOf('#') === 0) {
            // Alert this to an absolute link (pointing to the correct section on the hompage)
            this.href = "/" + this.hash;
        }
    });
}

/**
 * Initiate Awesome Smooth Scrolling based on a.href
 */
$('a.smooth-scroll, #top_main_nav a').click( function() {
    target = $(this).attr('href');
    offset = $(target).offset();
    $('body,html').animate({ scrollTop : offset.top }, 700);
    event.preventDefault();
});

【讨论】：