Question

我使用的是html 5模板，该模板基本上有一个大的索引html文件并使用锚点（id =＆＃34;＆＃34;）并打开＆＃34; new＆＃34;页。

以下是我的网站：http://www.plans4canada.ca

现在在此页面上：http://www.plans4canada.ca/#phones，我想在顶部添加一个链接，以便跳转到＃34;这页纸。基本上想要在顶部有3个链接跳转到A-C（有点多余），D-E和F-H位于底部。

我尝试添加ID，但这样会打开＆＃34;一个新页面，而不仅仅是向下滚动。

有任何帮助吗？对不起，html noob：）

Answer 1

您可以使用Javascript。让你的锚点onclick隐藏所有其他东西，只显示手机标签。其余的相同。看看我的意思：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试顺畅滚动

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

在HTML5中锚定（跳转页面）

2 个答案: