在单击事件期间，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 是什么。

1. 处理函数应该是这样的：

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

它使用 preventDefault 来防止正常的<a>点击行为。它使用这个答案（如何使用 jquery 动画滚动）使用 jquery动画滚动到元素。

补充笔记：

• 不要将您的函数声明放在$(document).ready.