HTML5中的錨點（頁面內跳轉）

Question

我正在使用html 5模板，該模板基本上具有1個大索引html文件，並使用錨點（id =“”）並打開“新”頁面。

這是我的網站： http : //www.plans4canada.ca

現在在此頁面上： http : //www.plans4canada.ca/#phones ，我想在頂部放置一個鏈接，該鏈接將在頁面內“跳轉”。 基本上想在頂部有3個鏈接，將跳轉到底部的計划AC（有點多余），DE和FH。

我嘗試添加id，但這將“打開”新頁面，而不僅僅是向下滾動。

有什么幫助嗎？ 抱歉，html noob :)

Answer 1

您可以使用Javascript。 使錨點onclick隱藏所有其他內容，僅顯示電話選項卡。 其余的都一樣。 明白了嗎：

 .nav { text } body { font-family: sans-serif; } button { background: white; border: 1px solid black; padding: 10px 20px; font-size: 15px } 

 <div class='nav'> <button onclick='document.getElementById("phone").style.display = "block"; document.getElementById("plans").style.display = "none";'>Phones</button> <button onclick='document.getElementById("plans").style.display = "block"; document.getElementById("phone").style.display = "none"'>Plans</button> </div> <div id='phone'> Here is the information of your phone page. The other page are set to <code>Display: none</code> by default, so I made a button that will show the phone page onclick, and also hide the plans page. </div> <div id='plans' style='display:none'> Placeholder </div> 

Answer 2

嘗試平滑滾動

https://github.com/cferdinandi/smooth-scroll