平滑滚动导航-将类添加到活动链接

Question

I have implemented basic smooth scrolling to anchors for my navigation list....

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

 html, body{ margin:0; padding:0; } #navigation{ position:fixed; background:wheat; width:100%; top:0; } #navigation li{ display:inline; } .item1, .item2, .item3, .item4{ height:500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="navigation"> <li><a href="#item1_anchor">Item 1</a></li> <li><a href="#item2_anchor">Item 2</a></li> <li><a href="#item3_anchor">Item 3</a></li> <li><a href="#item4_anchor">Item 4</a></li> </ul> <div class="item1"> <a class="anchor" id="item1_anchor"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lorem scelerisque, scelerisque felis bibendum, gravida tellus. Praesent ut tristique tellus. Curabitur at risus sed risus cursus imperdiet. Etiam ac lorem eget tortor dictum feugiat id sit amet metus. Fusce bibendum pharetra odio vel auctor. Donec mattis imperdiet euismod. Morbi ac convallis dolor. Pellentesque dui est, consequat sed ante nec, ultricies volutpat enim. Donec vitae pulvinar dolor, at semper mi. Donec gravida a dolor ac blandit. Donec vel urna at purus tincidunt sodales. Maecenas laoreet elit at turpis sodales scelerisque. Phasellus sem urna, viverra sed odio ut, auctor sodales neque. </div> <div class="item2"> <a class="anchor" id="item2_anchor"></a> Praesent interdum commodo accumsan. Etiam neque est, luctus ut finibus eu, lobortis id velit. Nullam id mi aliquam, aliquam dolor pellentesque, laoreet sem. Fusce suscipit erat at laoreet pulvinar. Pellentesque venenatis blandit ipsum in venenatis. Aenean at eros felis. Etiam fermentum vehicula consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sagittis sem vel dui consectetur hendrerit. Nulla fermentum dignissim dolor, in sollicitudin sem dictum in. Maecenas non mi justo. Aenean id commodo ipsum. </div> <div class="item3"> <a class="anchor" id="item3_anchor"></a> Nunc condimentum risus bibendum lacinia ultrices. Suspendisse potenti. Phasellus scelerisque gravida diam, consectetur fermentum augue suscipit non. Phasellus ut augue ornare, congue sapien sed, cursus dui. Morbi congue dapibus felis, eu dapibus risus ornare nec. Proin eleifend enim et eros posuere posuere non blandit lacus. Quisque at lectus diam. Morbi facilisis accumsan diam ut tincidunt. Donec in tempus orci, eleifend convallis metus. Phasellus cursus magna nec purus varius, vitae cursus neque porta. Mauris malesuada dictum enim ut lobortis. Praesent porta metus eget efficitur aliquet. Duis vehicula augue a lorem interdum sollicitudin. </div> <div class="item4"> <a class="anchor" id="item4_anchor"></a> Aliquam erat volutpat. Nulla sed mauris tellus. Pellentesque tristique eros ac urna faucibus vestibulum. Vivamus ac ante eget ante maximus commodo a vitae diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris condimentum nulla a molestie fringilla. Sed pharetra ac diam in facilisis. Sed ut ligula eu augue fermentum dictum. Suspendisse non accumsan enim, eget facilisis diam. Morbi a sapien at metus vulputate egestas id quis ante. </div> 

All works great but I am now wanting to add a class to the active link so I can style it in the navigation menu.

Anyone have an example?

Answer 1

save clicked element outside .animate() then you can add or remove class

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

 html, body { margin: 0; padding: 0; } #navigation { position: fixed; background: wheat; width: 100%; top: 0; } #navigation li { display: inline; } .item1, .item2, .item3, .item4 { height: 500px; } .activeLink { background: orange; font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="navigation"> <li><a href="#item1_anchor">Item 1</a></li> <li><a href="#item2_anchor">Item 2</a></li> <li><a href="#item3_anchor">Item 3</a></li> <li><a href="#item4_anchor">Item 4</a></li> </ul> <div class="item1"> <a class="anchor" id="item1_anchor"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lorem scelerisque, scelerisque felis bibendum, gravida tellus. Praesent ut tristique tellus. Curabitur at risus sed risus cursus imperdiet. Etiam ac lorem eget tortor dictum feugiat id sit amet metus. Fusce bibendum pharetra odio vel auctor. Donec mattis imperdiet euismod. Morbi ac convallis dolor. Pellentesque dui est, consequat sed ante nec, ultricies volutpat enim. Donec vitae pulvinar dolor, at semper mi. Donec gravida a dolor ac blandit. Donec vel urna at purus tincidunt sodales. Maecenas laoreet elit at turpis sodales scelerisque. Phasellus sem urna, viverra sed odio ut, auctor sodales neque. </div> <div class="item2"> <a class="anchor" id="item2_anchor"></a> Praesent interdum commodo accumsan. Etiam neque est, luctus ut finibus eu, lobortis id velit. Nullam id mi aliquam, aliquam dolor pellentesque, laoreet sem. Fusce suscipit erat at laoreet pulvinar. Pellentesque venenatis blandit ipsum in venenatis. Aenean at eros felis. Etiam fermentum vehicula consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sagittis sem vel dui consectetur hendrerit. Nulla fermentum dignissim dolor, in sollicitudin sem dictum in. Maecenas non mi justo. Aenean id commodo ipsum. </div> <div class="item3"> <a class="anchor" id="item3_anchor"></a> Nunc condimentum risus bibendum lacinia ultrices. Suspendisse potenti. Phasellus scelerisque gravida diam, consectetur fermentum augue suscipit non. Phasellus ut augue ornare, congue sapien sed, cursus dui. Morbi congue dapibus felis, eu dapibus risus ornare nec. Proin eleifend enim et eros posuere posuere non blandit lacus. Quisque at lectus diam. Morbi facilisis accumsan diam ut tincidunt. Donec in tempus orci, eleifend convallis metus. Phasellus cursus magna nec purus varius, vitae cursus neque porta. Mauris malesuada dictum enim ut lobortis. Praesent porta metus eget efficitur aliquet. Duis vehicula augue a lorem interdum sollicitudin. </div> <div class="item4"> <a class="anchor" id="item4_anchor"></a> Aliquam erat volutpat. Nulla sed mauris tellus. Pellentesque tristique eros ac urna faucibus vestibulum. Vivamus ac ante eget ante maximus commodo a vitae diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris condimentum nulla a molestie fringilla. Sed pharetra ac diam in facilisis. Sed ut ligula eu augue fermentum dictum. Suspendisse non accumsan enim, eget facilisis diam. Morbi a sapien at metus vulputate egestas id quis ante. </div> 

Answer 2

Add below code on to your function,

jQuery('#navigation').find('a').removeClass('active');
jQuery(this).addClass('active');

and add css for active class

jQuery(function() {
  jQuery('a[href*="#"]:not([href="#"])').click(function() {
    jQuery('#navigation').find('a').removeClass('active');
    jQuery(this).addClass('active');
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html, body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});