在點擊事件期間，JQuery scrollTo函數錯誤找不到滾動到某個div ID的方法

Question

我正在嘗試滾動到我網站上的某個部分，此部分標有ID，我想在點擊事件上使用動畫jquery滾動。 這是我目前的代碼：

js標題部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="index.js"></script>

菜單區域

<li><a onclick="scrollTo()" href="#testimonials">Testimonials</a></li>
<li><a onclick="scrollTo()" href="#portfolio">Portfolio</a></li>
<li><a onclick="scrollTo()" href="#contact">Contact</a></li>
<li><a onclick="scrollTo()" href="#faq">FAQ</a></li>

Javascript文件

$(document).ready(function() {
    console.log("Test")
    function scrollTo() {
        console.log("Clicked!")
        var elem = document.getElementById('testimonials');
        console.log(elem)
        elem.scrollTop = elem.scrollHeight;
        window.scrollTo
    }
})

Answer 1

在這里看到： codepen

首先：不要使用scrollTo作為處理程序名稱。 因為scrollTo是js中的一個函數。

---

附加步驟：

1. 將內聯事件添加到導航元素，如下所示：

<a onclick="scrollTo_(event,'testimonials')" href="#testimonials">Testimonials</a>

它將傳遞click event和id ，讓處理程序知道目標元素的id是什么。

2. 處理程序功能應該是這樣的：

function scrollTo_(ev,id) {
  ev.preventDefault();
  $([document.documentElement, document.body]).animate({
    scrollTop: $("#"+id).offset().top
  }, 2000);
}

它使用preventDefault來阻止正常的<a>點擊行為。 並使用此答案（ 如何使用jquery動畫滾動）以使用jquery動畫滾動到元素。

---

補充筆記：

• 不要將函數聲明放在$(document).ready 。