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

I have a drop down menu that I would like to add anchors to. The drop down has 4 options which are all hidden on start. When an option is clicked, that section will be visible. The drop down menu will have content above it and I need the page to move down when an option is clicked and becomes visible. How do I add anchors to these options?

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

I'm not well versed in javascript, but this is what I have:

我不熟悉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>

1 个解决方案

#1

You can get the top level of the item your fetching.

您可以获取项目的*别。

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

In your example:

在你的例子中:

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

You can also animate the scrolling:

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

$('#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