例如，我在名爲「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（{行爲： '平滑'}）

相關問題