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

Question

例如，我在导航栏中有一个名为“ German”的按钮，当用户单击“ German”时，它向下滚动到标题为“ Traditional German Foods”的h2。 同样，如果a在我的导航栏中有一个名为“ French”的按钮，则用户页面将进一步向下滚动到名为“ Traditional French Foods”的h2。 我已经学习了大约4个月的代码，但似乎无法弄清楚，任何帮助都将不胜感激。

Answer 1

如其他答案所述，您可以使用ID和锚标记。 但这立即滚动。 要轻松地为滚动动画设置动画，可以使用scrollIntoView方法。

已引入“ 滚动行为”规范作为Window界面的扩展，以允许开发人员选择采用本机平滑滚动。 到目前为止，这仅在Firefox中实现。

有一个用于其他浏览器的polyfill 。

element.scrollIntoView（{behavior：'smooth'}）

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

Answer 2

一个简单的方法来做到这一点是使用＃哈希，你把一个ID在你的H2像<h2 id="german">German</h2>从头部你的链接应该是这样的：

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

可以在这里找到更多信息： https : //www.w3schools.com/html/html_links.asp

Answer 3

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

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

Answer 4

您可以使用标签做锚，然后标签会立即向下滚动，您可以使用JavaScript进行改进。

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


<div id=#german></div>