滚动条定位

<body>  
<div id="scrollBody" style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:scroll;height:300px;">
    <div style="font-size:20px;height:100px;">
      1
    </div>
    <div style="font-size:20px;height:100px;">
      2
    </div>
    <div style="font-size:20px;height:100px;">
      3
    </div>
    <div id="hahah"style="font-size:20px;height:100px;">
      4
    </div>
    <div style="font-size:20px;height:100px;">
      5
    </div>
  </div>
  <div style="position:relative;top:350px;">
    <button class="btn1"  id="scrollToTop" onclick="scrollToTop">按钮1</button>
    <button  class="btn2"> 按钮2</button>
  </div>
</body> 
 <script src="js/jquery.js"></script>
<script>
  
      /*function scrollToTop(){
          document.getElementById('scrollBody').scrollTop = 200;
      }*/直接滚动
     
       $(document).ready(function(){
  $( ".btn2" ).click(function(){
    alert( $( "#hahah" ).offset().top+"px" );
  });
  $( ".btn1" ).click(function(){
    var scroll_offset = $("#hahah").offset().top;
     $("#scrollBody").animate({
                scrollTop : scroll_offset
            }, 500);
  });
});
      
  </script> 

猜你喜欢

转载自blog.csdn.net/qq_29648689/article/details/80255471