4

以下が可能かどうか疑問に思っていました。現在、jquery を使用してページの下部にある DIV を開くコードがいくつかあります。これは次のように簡単です。

$("#country_slide").slideToggle();

次に、ページの一番下までスクロールするコード例をいくつか示します (ほんの一例です)。

$('html, body').animate({scrollTop:$(document).height()}, 'slow');

問題は、開いたこの div が展開するとページの下部から外れるので、開くだけでなく、ページを下にスクロールして、現在開いている div が開いているときに表示することです。

divを完全に展開してから、利用可能な領域までスクロールする方法しか考えられません。両方のプロセスを順番に実行するのではなく、同時に実行したいのです。

これはjqueryで可能ですか？可能であれば、誰かがその方法を説明してください。

4

1 に答える 1

2

このフィドルをチェックしてください: JsFiddle

$(document) の準備ができたら、表示 (show、fadeIn、slideDown など) して要素にスクロールするイベントを呼び出しています。

表示機能のタイマーをミリ秒単位で 3 秒に配置し、スクロールを 4 秒に設定しました。これらの時間を必要に応じて調整して、非表示の要素を適切に表示することができます。

CSS

 #container{height:850px;background-color:red;width:300px;text-align:center; }
 #bottomDiv{display:none;position:relative;top:400px;width:260px;height:200px; background-color:dodgerblue;margin:20px auto;border: 1px solid #000000;text-align:center;}

HTML

 <div id="container" style="height:1500px;background-color:red;width:300px;">
      <p>I'm opening a div and scrolling below</p>
      <div id="bottomDiv" class="tempCss">Bottom Div</div>
 </div>

脚本

   $(document).ready(function(){
       $("#bottomDiv").slideDown(3000);
       $('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){
       });  
   });
于 2013-06-09T23:38:58.360 に答える