jQuery現在のクラスのスムーススクロール

Question

まだjQueryの基礎を学んでいますが、私はこのサイトからのユーザーの回答から興味深いコードを得ています。しかし、私はそれにいくつかの機能を追加する必要があります - 私はアンカーに対応するセクションに到達するときに現在の状態を追加する必要があります。私はあなたがjQueryののaddClass機能を使用することができ、クラスに.on-section

$('a[href^="#"]').on('click',function (e) { 
 
      e.preventDefault(); 
 

 
      var target = this.hash; 
 
      $target = $(target); 
 

 
      $('html, body').stop().animate({ 
 
       'scrollTop': $target.offset().top + 2 
 
      }, 1000, function() { 
 
       window.location.hash = target; 
 
      }); 
 
     });

.anchor-menu { 
 
    position: fixed; 
 
    z-index: 690; 
 
    right: 5%; 
 
    margin: auto; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.anchor-menu ul { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.anchor-menu ul li { 
 
    margin-top: 12px; 
 
    margin-bottom: 12px; 
 
} 
 

 
.anchor-menu ul li a { 
 
    display: block; 
 
    width: 15px; 
 
    height: 15px; 
 
    background-color: #000; 
 
    border: 1px solid #fff; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    -ms-border-radius: 15px; 
 
    -o-border-radius: 15px; 
 
    border-radius: 15px; 
 
} 
 

 
.anchor-menu ul li a:hover { 
 
    background-color: #ffae2a; 
 
} 
 

 
.anchor-menu ul li a.on-section { 
 
    background-color: #cb016f; 
 
} 
 

 
section { 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="anchor-menu"> 
 
      <ul> 
 
       <li> 
 
        <a href="#one"></a> 
 
       </li> 
 
       <li> 
 
        <a href="#two"></a> 
 
       </li> 
 
       <li> 
 
        <a href="#three"></a> 
 
       </li> 
 
       <li> 
 
        <a href="#four"></a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
<section id="one"> 
 
one 
 
</section> 
 
<section id="two"> 
 
two 
 
</section> 
 
<section id="three"> 
 
three 
 
</section> 
 
<section id="four"> 
 
text 
 
</section>

Answer 1

を設定する必要があります。

スコープの問題を解決するには、$(this)の値を持つselfという変数を作成します。

クリックしたアンカータグにクラスを追加するには、self.addClass('on-section')を使用します。

$('a[href^="#"]').on('click',function (e) { 
 
      e.preventDefault(); 
 

 
      var self = $(this); 
 

 
      var target = this.hash; 
 
      $target = $(target); 
 

 
      $('html, body').stop().animate({ 
 
       'scrollTop': $target.offset().top + 2 
 
      }, 1000, function() { 
 
       window.location.hash = target; 
 
       $('a[href^="#"]').removeClass('on-section'); 
 
       self.addClass('on-section'); 
 
      }); 
 
     });

.anchor-menu { 
 
    position: fixed; 
 
    z-index: 690; 
 
    right: 5%; 
 
    margin: auto; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.anchor-menu ul { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.anchor-menu ul li { 
 
    margin-top: 12px; 
 
    margin-bottom: 12px; 
 
} 
 

 
.anchor-menu ul li a { 
 
    display: block; 
 
    width: 15px; 
 
    height: 15px; 
 
    background-color: #000; 
 
    border: 1px solid #fff; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    -ms-border-radius: 15px; 
 
    -o-border-radius: 15px; 
 
    border-radius: 15px; 
 
} 
 

 
.anchor-menu ul li a:hover { 
 
    background-color: #ffae2a; 
 
} 
 

 
.anchor-menu ul li a.on-section { 
 
    background-color: #cb016f; 
 
} 
 

 
section { 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="anchor-menu"> 
 
      <ul> 
 
       <li> 
 
        <a href="#one"></a> 
 
       </li> 
 
       <li> 
 
        <a href="#two"></a> 
 
       </li> 
 
       <li> 
 
        <a href="#three"></a> 
 
       </li> 
 
       <li> 
 
        <a href="#four"></a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
<section id="one"> 
 
one 
 
</section> 
 
<section id="two"> 
 
two 
 
</section> 
 
<section id="three"> 
 
three 
 
</section> 
 
<section id="four"> 
 
text 
 
</section>