element.scrollIntoView（{behavior：＆＃39; smooth＆＃39;}）

Question

例如，我在导航栏中有一个标题为＆＃34;德语＆＃34;的按钮，当用户点击＆＃34;德语＆＃34;时，它会向下滚动到标题为＆＃34;传统的h2德国食品＆＃34;。同样的事情，如果我的导航栏中有一个名为＆＃34; French＆＃34;的按钮，用户的页面将进一步向下滚动到名为＆＃34;传统法国食品＆＃34;的h2。我现在已经学习了大约4个月的代码，而且我似乎无法解决这个问题，我们非常感谢任何帮助。

Answer 1

正如其他答案所提到的，您可以使用id和锚标签。但那会立即滚动。要轻松为滚动设置动画，您可以使用scrollIntoView方法。

Scroll Behavior specification已被引入 Window界面的扩展，允许开发人员选择加入原生平滑滚动。到目前为止，这只是在实施中 Firefox浏览器。

其他浏览器有polyfill。

element.scrollIntoView（{behavior：＆＃39; smooth＆＃39;}）

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

Answer 2

一种简单的方法是使用#hheshes，你在 h2 中添加了一个ID <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>

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

4 个答案:

element.scrollIntoView（{behavior：＆＃39; smooth＆＃39;}）