Javascript 滚动页面上的导航栏。主动链接

目前我的网站有一个固定导航条滚动功能（当您单击导航栏上的不同链接时，页面会向下滚动。我添加了一个功能，即您所在的页面有一个活动链接。唯一的问题是，当您单击导航栏上的不同链接时，当它经过其他页面时，这些链接会高亮显示，直到您到达所需页面为止（例如，如果您是联系人，单击“主页”，它将突出显示公文包，然后是“体验”，然后是“关于”，最后是到达主页后的主页。我不希望它突出显示它经过的公文包

HTML

CSS

JAVASCRIPT

$(document).ready(function () {
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        $('.link').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 10) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });
    });
});


$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: (target.offset().top - 0)
        }, 900);
        return false;
      }
    }
  });
});

---

我想你可以删除滚动功能，只在点击时突出显示链接

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Remove 'active' class from all links
            $('.link').removeClass('active');
            // Add 'active' class to the current link
            $(this).addClass('active');
            // And animation
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 0)
                }, 900);
                return false;
            }
        }
    });
});

---

我没有对它进行测试，但类似的东西应该可以工作。我认为您并不真正需要window.scroll（）函数。

您可以发布一个JSFIDLE，其中包含一个展示不希望出现的行为的示例吗？

body{
    font-size: 12pt;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    margin-left: auto;
    margin: 0px;
    padding: 0px;
    }

.wrapper{
    width: 400px;
    margin: 0 auto;
    position: relative;
    padding: 28px 0 0 0;
    }

.down{
    text-align:center;
    position:relative;
    }

/* nav */

 #nav ul{ 
    margin-top: 0px;
    width: 100%;
    padding: 25px 0px;
    background-color: #f2f2f2; 
    border-top:solid #8dacf9;
    position: fixed;
    margin-left: auto;
    text-align: center;
    z-index: 4;
    } 

 #nav ul li{  
    display: inline-block; 
    } 

#nav ul li a{ 
    text-decoration: none; 
    padding: 25px 35px; 
    color: #000000; 
    background-color: #f2f2f2; 
    } 

#nav ul li a:hover{ 
    color: #8dacf9; 
    background-color: #ffffff;
    }

#nav ul li a.active{ 
    color: #8dacf9; 
    background-color: #ffffff; 
    }


/* icon */

.icon{
    float: left;
    height: 50px;
    margin-top: 0px;
    position: fixed;
    z-index: 10;
    }

#icon ul{ 
    margin-top: auto;
    padding: 10px 30px;
    background-color: #f2f2f2; 
    border-top:solid #8dacf9;
    position: fixed;
    } 

#icon ul li{  
    display: inline; 
    } 

#icon ul li a{ 
    color: #000000; 
    background-color: #f2f2f2; 
    margin-top: 0px;
    } 


/*  links */

a:link{
    color: #000000;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }

a:visited{
    text-decoration: none;
    color: #000000;
    }

a:hover{
    text-decoration: none;
    color: #8dacf9;
    }

a:active{
    text-decoration: none;
    color: #8dacf9;
    }   


/*home*/

#home{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    }

.homeposition{
    text-align:center;
    margin-top:70px;
    }



/* about */

#about{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }

.aboutposition{
    text-align:center;
    margin-top:70px;
    }



/* experience */

#experience{
    height:auto;
    position:relative;
    color: #000000;
    text-align: center;
    }

.experienceposition{
    margin-top:70px;
    }

.resume:link{
    color: #8dacf9;
    font-size: 1.2em;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }

.resume:visited{
    text-decoration: none;
    color: #8dacf9;
    }

.resume:hover{
    text-decoration: none;
    color: #b4b3b3;
    }

.resume:active{
    text-decoration: none;
    color: #b4b3b3;
    }   


/* portfolio */

#portfolio{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }

.portfolioposition{
    text-align:center;
    margin-top:70px;
    }


/* contact */

#contact{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }

.contactposition{
    text-align:center;
    margin-top:70px;
    }

$(document).ready(function () {
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        $('.link').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 10) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });
    });
});


$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: (target.offset().top - 0)
        }, 900);
        return false;
      }
    }
  });
});

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Remove 'active' class from all links
            $('.link').removeClass('active');
            // Add 'active' class to the current link
            $(this).addClass('active');
            // And animation
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 0)
                }, 900);
                return false;
            }
        }
    });
});