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

时间：2017-08-06 12:08:35

标签： javascript jquery html css

我已经为导航列表的锚点实现了基本的平滑滚动.... 

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>

一切都很好但我现在想要在活动链接中添加一个类，以便我可以在导航菜单中设置它。

有人有例子吗？

2 个答案:

答案 0 :(得分：1)

将点击的元素保存在.animate()之外，然后您可以添加或删除类

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>

答案 1 :(得分：-1)

将以下代码添加到您的函数

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

并为活动类添加css 

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;
      }
    }
  });
});
相关问题
最新问题