Javascript 单击按钮时，如何使导航栏滚动页面？

例如，我在导航栏中有一个标题为“德语”的按钮，当用户单击“德语”时，它会向下滚动到标题为“传统德国食品”的h2。同样，如果a在我的导航栏中有一个名为“French”的按钮，那么用户的页面将进一步向下滚动到一个名为“Traditional French Foods”的h2。我已经学习了大约4个月的代码，但我似乎不明白这一点，非常感谢任何帮助

你可以用a标记做一个锚，然后它会立即向下滚动，你可以使用javascript来改进它

<a href="index.php#german">German</a>


<div id=#german></div>

---

一个简单的方法是使用散列，你在你的h2中输入一个id，比如

德语，你的标题链接应该是这样的：

<a href="#german">Jump to German</a>



更多信息可在此处找到：

传统德国食品
如其他答案所述，您可以使用id和锚定标记。但它会立即滚动。要轻松设置滚动动画，可以使用方法

已作为一个
窗口界面的扩展，允许开发者选择加入
要平滑滚动。到目前为止，这项措施只在中国实施
火狐

对于其他浏览器，有一个简单的解决方案

元素。scrollIntoView（{behavior:'smooth'}）
向我们展示一些标记和您尝试过的内容。提示：使用锚定链接和id。在过去，锚定标签和id的设计就是为了这个。因此，您可以使用javscript scroll，但如果它很简单，您只需说创建一个锚定标记即可
，然后在页面后面的div中说你有<代码>内容

您的标记在这里有点混乱。。应该是

href=#德语

和您的

id=“德语”

。不鼓励只回答代码的答案，因为它们没有解释如何解决问题。您应该更新您的答案，以解释此代码的作用以及如何使用它。请复习

<a href="#german">German</a>

<h2 id="german">Traditional German Foods</h2>

document
  .querySelector('YOUR_TRIGGER_HERE')
  .addEventListener('click', event => {
    document
     .querySelector('YOUR_DESTINATION_HERE')
     .scrollIntoView({behavior: 'smooth'})
  })