html - 在 html 的 <Select> 下拉列表中使用页面 anchor

Question

我有一个包含大量表格的静态 HTML 页面。我想使用 html 标签 <select>创建一个简单的下拉菜单，跳转到页面下方的特定表格。

什么命令设置用户选择跳转页面以及需要什么 anchor 代码来为该选择提供目标。

Answer 1

我相信您只需要使用 JavaScript 来创建它，这样当您单击/更改选择框上的值时，它会将您带到该选择选项的值中指定的链接。

<select name="dropdpown" size="1" id="select-anchor">
    <option value="#link">foo</option>
    <option value="#link">bar</option>
</select>

并且将 jQuery 库用于 JavaScript 功能可以简化事情(以及您的 Web 项目的其他 JS 相关功能)

$(document).ready(function () {
    $('#select-anchor').change( function () {
        var targetPosition = $($(this).val()).offset().top;
        $('html,body').animate({ scrollTop: targetPosition}, 'slow');
    });
});

Here's a jsFiddle它在行动。