how to scroll div tag on button click

jquery jquery-animate

14,605

Solution 1

Try:

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

Fiddle here.

Solution 2

The outer is a class not an id, so you have to mention it as '.outer' instead '#outer'

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

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

demo here for you reference

14,605

Author by

Parminder

Hi. I actually started as a 3d artist, shifted to visual arts (graphic designs and then to motion graphics). Currently i am in stage of learning web technologies..

Updated on June 04, 2022

Comments

Parminder almost 2 years

I need to scroll a div outer tag so that 2nd inner div shows up on button click, Pls anyone check what is wrong with this code. or is there any other method to do so? I am new to Jquery and 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>