jq滚动条问题

最新推荐文章于 2024-09-30 09:15:00 发布

瓶仔之旅

最新推荐文章于 2024-09-30 09:15:00 发布

阅读量744

点赞数

分类专栏： jq踩得坑及问题

本文链接：https://blog.csdn.net/tlp604667633/article/details/81014696

版权

jq踩得坑及问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.滚动条滚动到指定位置

在jquery里，我们要操作滚动条滚动到指定的位置，是非常简单的，方法如下：

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

上面这句代码的意思就是操作窗口的滚动条，滚动到ID为aijquery2元素的位置，不过这句代码实现的效果是滚动条“瞬间”滚动过去的，所以日常中，我们通常给他加上一个滚动的“动画过程”：

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

animate就是jquery里实现动画效果的函数了。

上面我们操作的是整个网页窗口的滚动条，那么如果我们要操作某个DIV的滚动条，也是同样的方法，把上面代码中的 $("html,body")换成$ (“div#id”)就行了。

2.操作滚动条滚动到底部

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

上面这句代码说的是操作div#aijquery2的滚动条滚动到底部，这时我们需要获取div#aijquery2的scrollHeight高度，而在jquery里是没有这个属性方法的，所以我们需要把jquery对象转换成js对象，才能获取到scrollHeight。

另外，我们也可以用jquery的prop函数来直接获取元素的js属性：

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

代码实例：

<!doctype html>
<html lang="en">
<head>
<title>jquery操作滚动条的在线演示-aijQuery.cn</title>
<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</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>