2

ページの下部にスクロールする関数と、ページの上部にスクロールする関数の 2 つの関数があります。

ページのほぼ下部にある特定の div にスクロールする別の関数を追加しようとしています。以下の 2 つの機能するスクロール機能と、正しく機能しない 3 回目の試みを含めました。ページの一番下までスクロールしてから、div にジャンプします。

   //works
   $('.btn1').click(function(){
     $('html, body').animate({scrollTop:0}, 750);
   });

   //works
   $('.btn2').click(function(){
     $('html, body').animate({scrollTop:$(document).height()}, 750);
     return false;
   });

   //doesn't work
   $('.btn3').click(function(){
     $('html, body').animate({scrollTop:$(".myDiv").offset().top}, 750);
     return false;
   });

アドバイスや提案をいただければ幸いです。

4

4 に答える 4

1

html

<div class="btns">
<button class="btn1">One</button>
<button class="btn2">Two</button>
<button class="btn3">Three</button>
</div>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<div class="myDiv">My Div</div>
<p>stuff</p><p>stuff</p><p>stuff</p>

CSS

.btns {
    position: fixed;
}

JavaScript

   //works
   $('.btn1').click(function(){
     $('html, body').animate({scrollTop:0}, 750);
   });

   //works
   $('.btn2').click(function(){
     $('html, body').animate({scrollTop:$(document).height()}, 750);
     return false;
   });

   // works
   $('.btn3').click(function(){
     $('html, body').animate({scrollTop:$(".myDiv").offset().top}, 750);
     return false;
   });

例

于 2013-04-08T15:58:43.537 に答える
1

私の推測では (私たちが持っているものに基づいているのはそれだけです)、div id をクラスと混同して、

<div id='myDiv'>

したがって、スクロールする .myDiv はありません。

htmlを次のように変更します

<div class='myDiv'>

またはあなたのjQueryへ（セレクターの#myDivに注意してください）

//should work
$('.btn3').click(function(){
  $('html, body').animate({scrollTop:$("#myDiv").offset().top}, 750);
  return false;
});
于 2013-04-08T16:34:49.983 に答える