Question

我需要滚动一个div外部标记，以便第二个内部div显示在按钮单击上，请任何人检查此代码有什么问题。或者还有其他方法吗？我是Jquery和javascript的新手..

<head>
<script>
    $(document).ready(function(){

    $('#button1').click(function(){
    $('#outer').animate({top:'340px'},slow);    
});
});
</script>

<style>
.inner{
background-color:bisque;
width:400px;
height:400px;
margin: 100px auto;
}
.outer{
background-color:blueviolet;
width:100%;
height:1000px;
top:0;
position:relative;
}

.wrapper{
width:100%;
height:600px;
overflow:scroll;`
}
</style>

</head>

<body>
<div class="wrapper">
<div class="outer">
    <div class="inner">
        <input style="width:100%; height:35px; margin:20px auto;" value="Click Me to Scroll" type="button" id="button1">
    </div>

    <div class="inner">
        <input style="width:100%; height:35px; margin:20px auto;" value="Click Me to go Back" type="button" id="button2">
    </div>
</div>
</div>

</body>

Answer 1

尝试：

$('#button1').click(function(){    
    $('.wrapper').animate({ //animate element that has scroll
        scrollTop: 340 //for scrolling
    }, 1000);
});

Fiddle here.

Answer 2

outer是一个不是ID的类，因此您必须将其称为'.outer'，而不是'#outer'

$(document).ready(function(){
    $('#button1').click(function(){

     $('.outer').animate({
            'top': '340px'
        }, 1000);  
});
});

demo here供您参考

如何在按钮点击时滚动div标签

2 个答案: