Question

我有一个下拉菜单，我想添加锚点。下拉列表中有4个选项，这些选项在开始时都隐藏起来。单击选项时，该部分将可见。下拉菜单上面会有内容，当点击一个选项并显示时，我需要页面向下移动。如何为这些选项添加锚点？

我不熟悉javascript，但这就是我所拥有的：

<html>
    <head>
    <meta charset="utf-8"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
        <script>
            $(document).ready(function(){
                $('#purpose').on('change', function() {
                    if ( this.value == '0'){
                        $("#value0").show();
                    } else {
                        $("#value0").hide();
                    }

                    if ( this.value == '1'){
                        $("#value1").show();
                    } else {
                        $("#value1").hide();
                    }

                    if ( this.value == '2'){
                        $("#value2").show();
                    } else {
                        $("#value2").hide();
                    }

                    if ( this.value == '3'){
                        $("#value3").show();
                    } else {
                        $("#value3").hide();
                    }
                });
            });
        </script>
    </head>
    <body>

    <!--Drop Down-->
    <p><select id="purpose">
    <option value="0">&nbsp;</option>
    <option value="1">1 column w/big hero</option>
    <option value="2">1 column w/s-curve</option>
    <option value="3">1 column; linear</option>
    </select></p>
    <!--End Drop Down-->

    <table width="100%" height="1000" cellspacing="0" cellpadding="0" border="0" align="left">
        <tbody>
            <tr>
                <td>&nbsp; &nbsp;</td>
            </tr>
        </tbody>
    </table>  

    <!--Default Value 0-->
    <div id="value0" style="display:block;"></div>
    <!--End Default Value 0--> 

    <!--Option 1-->
    <div align="center" id="value1" style="display:none;">Content for value 1</div>
    <!--End Option 1-->  

    <!--Option 2-->
    <div align="center" id="value2" style="display:none;">Content for value 2</div>
    <!--End Option 2--> 

    <!--Option 3-->
    <div align="center" id="value3" style="display:none;">Content for Value 3</div>
    <!--End Option 3-->

    </body>
</html>

Answer 1

您可以获取该项目的最高级别。

var valueTop = $("#value0").offset().top; // what is the offset of the item
$(window).scrollTop( valueTop ); // set the window's scroll position

在你的例子中：

$('#purpose').on('change', function() {
    if ( this.value == '0'){
        $(value0).show();
        var vtop = $("#value0");
        var valueTop = vtop.offset().top
        $(window).scrollTop( valueTop );    
    } else {
        $("#value0").hide();
    }
})

您还可以为滚动设置动画：

$('#purpose').on('change', function() {
    if ( this.value == '0'){
        $(value0).show();
        var vtop = $("#value0");
        var valueTop = vtop.offset().top
        $('html, body').animate({scrollTop: valueTop},500);
    } else {
        $("#value0").hide();
    }
})

具有隐藏内容的选项的锚定下拉菜单

1 个答案: