例如，我在名为“German”的导航栏中有一个按钮，当用户点击“German”时，它会滚动到标题为“Traditional German Foods”的h2。同样的，如果在我的导航栏中有一个名为“French”的按钮，那么用户的页面会进一步向下滚动到名为“Traditional French Foods”的h2。我已经学习了大约4个月的代码，而且我似乎无法弄清楚，任何帮助都非常感谢。点击按钮时，如何让导航栏滚动页面？

2017-09-09 Giandemir

向我们展示了一些标记和你试过什么。提示：使用锚链接和ID。 – Terry

在过去的一天，这就是锚标签和ID的设计。所以你可以使用javscript滚动，但是如果它很简单，你只需要说创建一个锚标签''German'然后在你的页面上稍后在div上说。 '

content

' – Keith

-1

你可以用你的标签做一个锚，然后它会立即向下滚动，你可以使用JavaScript来改善它。

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


<div id=#german></div>

来源

2017-09-09 22:27:48

您的标记在这里有点困惑..应该是'href =＃german'和您的'id =“german”'。 – Keith

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

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

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

来源

2017-09-09 22:28:41 Sonicd300

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

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

来源

2017-09-09 22:32:51

仅限代码答案是因为它们不解释他们如何解决问题在问题中。你应该更新你的答案来解释这个代码的作用以及如何使用它。请回顾[我如何写出一个好的答案]（https://stackoverflow.com/help/how-to-answer） – FluffyKitten

至于其他的答案中提到，您可以使用ID和锚标记。但是，即时滚动。为了方便动画滚动，您可以使用scrollIntoView方法。

的Scroll Behavior specification已被引入作为扩展窗口接口，以允许开发者在选择天然平滑滚动。到目前为止，这只在Firefox中实现了。

其他浏览器有polyfill。

element.scrollIntoView（{行为： '平滑'}）

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

来源

2017-09-09 23:08:19

点击按钮时，如何让导航栏滚动页面？

回答

element.scrollIntoView（{行为： '平滑'}）

相关问题