2013-11-29 2 views
2

div 외부 태그를 스크롤하여 두 번째 내부 div가 버튼 클릭에 표시되도록해야합니다. Pls 누구든지이 코드에 문제가 있는지 확인하십시오. 아니면 그렇게 할 다른 방법이 있습니까? 나는버튼 클릭시 div 태그를 스크롤하는 방법


.. JQuery와 및 자바 스크립트에 새로운 오전

<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> 

답변

2

보십시오 : 당신이 언급 할 수 있도록

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

Fiddle here.

1

outer는, 클래스가 아닌 ID입니다 대신 '.outer '로 표시됩니다. '#outer'

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

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

demo here

관련 문제