在< Select>中使用页面锚点HTML中的下拉列表 [英] Using page anchors in <Select> dropdown list in html

问题描述

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

I have a static HTML page that contains a lot of tables. I would like to use the html tag <select> to create a simple dropdown menu which jumps to a specific table further down the page.

使用什么命令设置用户选择以跳转到页面，以及使用什么定位代码将选择作为目标.

What command sets the user selection to jump down the page and what anchor code is required to give that selection a target.

推荐答案

我相信您只需要使用JavaScript即可完成此操作，因此，当您单击/更改选择框上的值时，它将带您进入值中指定的链接选择选项.

I believe you just need to use JavaScript to make it so when you click/change value on the select box it takes you to the link specified in the value of that select option.

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

使用jQuery库的JavaScript功能可以简化操作(以及Web项目的其他与JS相关的功能)

And using jQuery library for the JavaScript functionality simplifies things (and will other JS related features of your web project)

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

这是一个正在起作用的jsFiddle .

这篇关于在< Select>中使用页面锚点HTML中的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！