孟垂博自媒体博客|只做精品

首页 > 网站教程 > js效果  >  jquery操作滚动条的基本知识

<!doctype html>

<html lang="en">

<head>

<title>jquery操作滚动条的基本知识</title>

</head>

<body style="height:2000px">

<DIV id="aijquery1" class="container-fluid text-center pt-4" style="height:350px">

  这是div#aijquery1<br>

  <button id="bt1">滚动到div#aijquery2</button>

</DIV>

<DIV id="aijquery2" class="container-fluid text-center pt-4" style="height:200px;overflow:auto;border:2px solid red">

  这是div#aijquery2<br><button id="bt2">滚动到div#aijquery1</button>

  <div style="height:450px;border:1px solid #green;padding-top:50px">

     这是div#aijquery2内的子DIV<br>

    <button id="bt3">操作div#aijquery2的滚动条滚动到底端</button>

  </div>

  这是div#aijquery2的底部

</DIV>

<script language="javascript">

$("#bt1").click(function(){

  //$("html,body").scrollTop($("#aijquery2").offset().top);

  $("html,body").animate({scrollTop:$("#aijquery2").offset().top},1000);

});

$("#bt2").click(function(){

  //$("html,body").scrollTop($("#aijquery1").offset().top);

  $("html,body").animate({scrollTop:$("#aijquery1").offset().top},1000);

});

$("#bt3").click(function(){

   //$("#aijquery2").scrollTop($("#aijquery2")[0].scrollHeight);

  $("#aijquery2").animate({scrollTop:$("#aijquery2").prop("scrollHeight")},500);

});

</script>

</body>

</html>

    分享:

    微信

    发表评论