如何创建链接到页面特定部分的下拉菜单？答案

【问题标题】：How to create a drop down menu that links to a specific part of the page?如何创建链接到页面特定部分的下拉菜单？
【发布时间】：2020-10-14 03:04:02
【问题描述】：

好的，我知道如何创建下拉菜单了。而且我知道如何使用 # 创建链接到页面特定部分的 href。但我需要的是一个下拉菜单，它使用这些 # 锚点将您引导到页面的特定部分。因此，您将单击下拉菜单，选择您的选项，然后它会自动向下滚动到页面的相应部分。我尝试的一切都不起作用。有什么帮助吗？

这是我尝试过的：

     <form>
   <fieldset>
      <legend>Select Your Location</legend>
      <p>
         <select id = "myList">
           <option value = "#ReigateEvents">Reigate</option>
           <option value = "#GodalmingEvents">Godalming</option>
           <option value = "#Enquiry">I don't see my location here</option>
         </select>
      </p>
   </fieldset>
</form>

【问题讨论】：

向我们展示您的尝试（提示：使用嵌入式 html/js 引擎）
@Edwin 我已经添加了我目前拥有的内容

标签： html drop-down-menu

【解决方案1】：

您只需要在链接后添加#。

试试这样的：

<ul>
<li><a href="/page.html#part1">Part 1</a></li>
<li><a href="/page.html#part2">Part 2</a></li>
<li><a href="/page2.html#part2">Page 2 Part 1</a></li>

已编辑

<select id = "myList" onchange="javascript:location.href = this.value;">
<option value = "page.html#ReigateEvents">Reigate</option>
<option value = "page.html#GodalmingEvents">Godalming</option>
<option value = "page.html#Enquiry">I don't see my location here</option>

【讨论】：

这不是一个下拉菜单，不是吗？这只是一个普通的列表。
好的。您需要一个选择选项。检查我编辑的答案

【解决方案2】：

您可以使用 javascript 执行以下操作。

function myAnchor(value){
  var top = document.getElementById(value).offsetTop;
  window.scrollTo(0, top);
	//document.getElementById(value).scrollIntoView();
}

p{
    height: 1500px;
}

<select id = "myList" onchange="myAnchor(this.value)">
  <option value ="test">Reigate</option>
  <option value ="GodalmingEvents">Godalming</option>
  <option value ="Enquiry">I don't see my location here</option>
</select>

<h2 id="GodalmingEvents">
  GodalmingEvents
</h2>
<h2 id="Enquiry">
  Enquiry
</h2>
<p></p>
<h1 id="test">
  test
</h1>

【讨论】：