在html的<Select>下拉列表中使用页面锚点

Question

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

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

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');
    });
});

这是一个实际的jsFiddle.