How to add an active class as the user scrolls WIT

问题:

I've created a navigation tool that changes active class based on the page section like this example tutorial: http://stanhub.com/tutorials/change-active-state-in-sticky-navigation-on-scroll/

My question is: How do I edit this code to remove/prevent the hashtag anchor link title from showing up in the browser URL?

My current work is:

$j(document).ready(function () {
    $j(document).on("scroll", onScroll);

    //smoothscroll
    $j('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $j(document).off("scroll");

        $j('a').each(function () {
            $j(this).removeClass('active');
        })
        $j(this).addClass('active');

        var target = this.hash,
            menu = target;
        $jtarget = $j(target);
        $j('html, body').stop().animate({
            'scrollTop': $jtarget.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $j(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $j(document).scrollTop();
    $j('#slide-nav a').each(function () {
        var currLink = $j(this);
        var refElement = $j(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $j('#slide-nav a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

回答1:

Something like that i think :

var t = null;
$j('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $j(document).off("scroll");

    $j('a').each(function () {
        $j(this).removeClass('active');
    })
    $j(this).addClass('active');
    t = $(this).attr('href');
    var target = t,
        menu = target;
    $jtarget = $j(target);
    $j('html, body').stop().animate({
        'scrollTop': $jtarget.offset().top+2
    }, 500, 'swing', function () {
        t = target;
        $j(document).on("scroll", onScroll);
    });
});
});

function onScroll(event){
var scrollPos = $j(document).scrollTop();
$j('#slide-nav a').each(function () {
    var currLink = $j(this);
    var refElement = $j(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $j('#slide-nav a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});
}

回答2:

This is the code that worked for me:

    $j(document).ready(function () {
    $j(document).on("scroll", onScroll);

   var t = null;
   $j('a[href^="#"]').on('click', function (e) {
       e.preventDefault();
       $j(document).off("scroll");

       $j('a').each(function () {
           $j(this).removeClass('active');
       })
       $j(this).addClass('active');
       t = $j(this).attr('href');
       var target = t,
           menu = target;
       $jtarget = $j(target);
       $j('html, body').stop().animate({
           'scrollTop': $jtarget.offset().top+2
       }, 500, 'swing', function () {
           t = target;
           $j(document).on("scroll", onScroll);
       });
   });
   });

   function onScroll(event){
   var scrollPos = $j(document).scrollTop();
   $j('#slide-nav a').each(function () {
       var currLink = $j(this);
       var refElement = $j(currLink.attr("href"));
       if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
           $j('#slide-nav a').removeClass("active");
           currLink.addClass("active");
       }
       else{
           currLink.removeClass("active");
       }
   });
   }