jQuery 的 animate 方法不起作用？

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'。