jqスクロールバーの問題
7759 ワード
1.スクロールバーを指定位置までスクロール
jqueryでは、スクロールバーを指定した位置にスクロールする操作は、次のように簡単です.
上のコードの意味はウィンドウのスクロールバーを操作して、IDがaijquery 2要素の位置までスクロールすることですが、このコードの実現効果はスクロールバーが「瞬間」にスクロールしたことなので、日常的には、スクロールの「アニメーションプロセス」を追加します.
animateはjqueryでアニメーション効果を実現する関数です.
上ではページウィンドウ全体のスクロールバーを操作していますが、DIVのスクロールバーを操作する場合も同様の方法で、上のコードの(「html,body」)を(「h t m l,b o d y」)に変更すればいいのです.
2.スクロールバーを操作して底部までスクロールする
上記のコードはdiv#aijquery 2を操作するスクロールバーを最後までスクロールする場合、div#aijquery 2のscrollHeightの高さを取得する必要がありますが、jqueryにはこの属性方法はありませんので、jqueryオブジェクトをjsオブジェクトに変換してscrollHeightを取得する必要があります.
また、jqueryのprop関数を使用して、要素のjsプロパティを直接取得することもできます.
コードの例:
jqueryでは、スクロールバーを指定した位置にスクロールする操作は、次のように簡単です.
$("html,body").scrollTop($("#aijquery2").offset().top);上のコードの意味はウィンドウのスクロールバーを操作して、IDがaijquery 2要素の位置までスクロールすることですが、このコードの実現効果はスクロールバーが「瞬間」にスクロールしたことなので、日常的には、スクロールの「アニメーションプロセス」を追加します.
$("html,body").animate({scrollTop:$("#aijquery2").offset().top},1000);animateはjqueryでアニメーション効果を実現する関数です.
上ではページウィンドウ全体のスクロールバーを操作していますが、DIVのスクロールバーを操作する場合も同様の方法で、上のコードの(「html,body」)を(「h t m l,b o d y」)に変更すればいいのです.
2.スクロールバーを操作して底部までスクロールする
$("#aijquery2").animate({scrollTop:$("#aijquery2")[0].scrollHeight},500);上記のコードはdiv#aijquery 2を操作するスクロールバーを最後までスクロールする場合、div#aijquery 2のscrollHeightの高さを取得する必要がありますが、jqueryにはこの属性方法はありませんので、jqueryオブジェクトをjsオブジェクトに変換してscrollHeightを取得する必要があります.
また、jqueryのprop関数を使用して、要素のjsプロパティを直接取得することもできます.
$("#aijquery2").animate({scrollTop:$("#aijquery2").prop("scrollHeight")},500);コードの例:
<html lang="en">
<head>
<title>jquery -aijQuery.cntitle>
<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#aijquery2button>
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#aijquery1button>
<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>