使用下拉菜单平滑滚动以锚定标签

时间:2015-12-14 05:12:49

标签: javascript jquery html css dropdown

<select>
<option value="#anchor">Anchor</option>
</select>

<a id="anchor">Anchor</a>

我试图让它顺利滚动,但到目前为止还没有奏效。我在网上找到的可行教程是常规垂直菜单,而不是下拉列表。有谁知道如何使这个工作?我一直在用这个:

<script>
$(document).ready(function(){
    $('option[value^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;
        });
    });
});
</script>

1 个答案:

答案 0 :(得分:1)

似乎您需要在更改选择值时滚动到锚点

1st:更改选择器以选择并使用更改事件

第二:使用<script> $(document).ready(function(){ $('select').on('change',function (e) { e.preventDefault(); // no need to use this line var target = $(this).val(); var $target = $(target); $('html, body').animate({ 'scrollTop': $target.offset().top }, 1000, 'swing', function () { // swing here will work if you include jquery-ui without that it will not make a effect //window.location.hash = target; }); }).change(); }); </script>

获取所选值
// Set typeface on textview
public static void SetTypeFace(Context ctx, TextView tv) {
    Typeface font = Typeface.createFromAsset(ctx.getAssets(),
            "Telex-Regular.ttf");
    tv.setTypeface(font);
}

Working Demo

  

注意:请务必包含jquery