下拉列表中的锚标记

Question

我正在研究如何创建一个下拉菜单，一旦选择了一个选项，而不是跳转到一个新页面，您可以通过锚标记向下滚动页面，但我无法弄清楚。

到目前为止，我的逻辑是将下拉列表设置为一个变量。拿那个变量和onchange，将它与它的当前位置进行比较，只要位置不是“0”，就尝试让它跟随锚链接，就像我让它加载一个新页面一样。有人可以帮我解决我所缺少的吗？

HTML:

 <select name="dropDown" id="dropDown">
<option value="one"><a href="#heading1">one</a></option>
<option value="two"><a href="#heading2">two</option>
<option value="three">three</option>
</select>

<p id="heading1"><a name="heading1">Heading one</a></p>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br    /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br />

<p id="heading2"><a name="heading2">Heading 2</a></p>

记者：

 var dropDownValue = document.getElementById("dropDown");

dropDownValue.onchange = function()
{
if(this.selectedIndex !== 0)
{
    window.location.href=this.value;
}
};

原文由 Theodore Steiner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个简单的例子。

PS： 避免 anchor 里面 option 。

 var dropDownValue = document.getElementById("dropDown");

dropDownValue.onchange = function() {
  if (this.selectedIndex !== 0) {
    window.location.href = this.value;
  }
};

 p {
  min-height: 500px;
}

 <select name="dropDown" id="dropDown">
  <option value="#heading1">one</option>
  <option value="#heading2">two</option>
  <option value="#heading3">three</option>
</select>

<p id="heading1"><a name="heading1">Heading one</a>
</p>
<p id="heading2"><a name="heading2">Heading two</a>
</p>
<p id="heading3"><a name="heading3">Heading three</a>

原文由 Pugazh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您不能将锚标记放入 <select> 元素中。但我认为你遇到的问题是你正在使用 window.location.href 而你应该使用 window.location.hash 。

我创建了这个维护锚标记但使用哈希的小提琴。我必须更新 "value=" 的值以匹配 id 您希望浏览器滚动到的位置。

https://jsfiddle.net/jqcdyv2b/

原文由 adam-beck 发布，翻译遵循 CC BY-SA 3.0 许可协议