セクションスクロールを実装しようとしているのですが、うまくいかず困っています。
コンテンツ2要素の先端が見えたらコンテンツ2をブラウザの上までスクロールさせるという機能をしたいです。(コンテンツは6個あり各コンテンツの先端が見えたらスクロールさせたい)
下記のコードを入れるとスクロールはしてくれるのですが、無限ループにおちいり困っています。
よろしくお願いいたします。
html
<!DOCTYPE html> <html xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <title>jQuery TechnicalNote - SAMPLE</title> <link rel="stylesheet" href="../../common/css/common.css"> <link rel="stylesheet" href="css/style.css"> <script src="../../common/js/jquery-1.11.3.min.js"></script> <script src="js/script.js"></script> </head> <body> <header class="baseHeader"> </header> <div id="wrapper"> <div class="scrEvent area1"><p>ここは コンテンツエリア【1】 です</p></div> <div class="scrEvent area2"><p>ここは コンテンツエリア【2】 です</p></div> <div class="scrEvent area3"><p>ここは コンテンツエリア【3】 です</p></div> <div class="scrEvent area4"><p>ここは コンテンツエリア【4】 です</p></div> <div class="scrEvent area5"><p>ここは コンテンツエリア【5】 です</p></div> <div class="scrEvent area6"><p>ここは コンテンツエリア【6】 です</p></div> </div><!-- /#wrapper --> <footer class="baseFooter"> <small>Copyright © SB Creative Corp. All Rights Reserved.</small> <footer> </body> </html>
jQuery
// SCRIPT //////////////////////////////////////// $(function(){ var setArea = $('.scrEvent'), showHeight = 100; setArea.css({display:'block'}); $(window).on('load scroll resize',function(){ setArea.each(function(){ var a1 = $('.area1').offset().top, a2 = $('.area2').offset().top, a3 = $('.area3').offset().top, a4 = $('.area4').offset().top, a5 = $('.area5').offset().top, a6 = $('.area6').offset().top, setThis = $(this), areaTop = setThis.offset().top; if ($(window).scrollTop() >= (a1 + showHeight) - $(window).height()){ $("html,body").stop().animate({scrollTop:a2},100); } }); }); });
あなたの回答
tips
プレビュー