jQueryのアニメーションメソッドが機能していませんか？

Question

jQueryアニメーションメソッドを使用しようとしていますが、正しく動作していません。 私は自己呼び出し関数と関数宣言の両方を使用していますが、まだ動作していません。 助けを前もってありがとう。

<ul id='menu-list'> 
 
         <li><a href="index.html">Home</a></li> 
 
         <li><a href="#" class='page-link' id='about' data-value='services'>About</a></li> 
 
         <li><a href="#" class='page-link' data-value='team'>Team</a></li> 
 
         <li><a href="#" class='page-link' data-value='search'>Search</a></li> 
 
         <li><a href="#" class='page-link' data-value='contact'>Contact</a></li> 
 
        </ul> 
 
        
 
        
 
        <div id="main-services" class='services'></div> 
 
        <div id='services-container' class='search'></div> 
 
        <div id='team' class='team'></div> 
 
        <div id='contact' class='contact'></div>

`enter code here` 
 

 
(function() { 
 
    
 
    var links = $('.page-link'); 
 
    
 
    for (var i = 0; i < links.length; i++) { 
 
     
 
     links[i].onclick = function() { 
 
      
 
      var data = this.getAttribute('data-value') 
 
      
 
      $('body').animate({ 
 
       
 
       scrollTop: $('.' + data).offset().top 
 
       
 
      }, 800); 
 
     }; 
 
    } 
 
})();

Answer 1

あなたは、単にclass=page-linkですべての項目にonClickの機能を追加しますか？

単純にこれをやろう：

var links = $('.page-link'); 

links.on('click', function(){ 
    var data = $(this).attr('data-value'); 
    $('html, body').animate({ 
     scrollTop: $('.' + data).offset().top 
    }, 800); 
}); 

は少し異なる構文を試してみました。また、animate関数でセレクタ 'html、body'を使用してください。