オーバーフローしたdiv内をスクロール

Question

私はjavascriptを初めて使用しています。その時点で私は詳細を知ろうとしています。私の考えは、単純なナビゲーションメニューと、オーバーフローが有効になっているdivとその中に多くのdivがあるdivを作成することでした。しかし、オーバーフローしたdiv内のスクロールに使用しているコードは機能していないようです。私は自分で問題を解決しようとしましたが、私の知識は十分ではありませんでした。

最後に、私が書いたコードの実行サンプルを示します。問題は、divを実際に2番目のdivにスクロールしているリンク「ページ2」をクリックしたときです。ただし、既にこのページにいる間にリンク「ページ2」を押すと、自動的に最初のdivに移動します。また、「ページ2」に入っているときに「ページ3」のリンクが機能していないようです。誰かが私を助けたり、少なくとも私にこの問題を解決する方法を提案したら、私は本当に感謝しています。前もって感謝します。

$(".Link1").click(function() { 
 
    $('.Box').animate({ 
 
     scrollTop: $(".Page1").offset().top}, 
 
     'slow'); 
 
}); 
 

 
$(".Link2").click(function() { 
 
    $('.Box').animate({ 
 
     scrollTop: $(".Page2").offset().top}, 
 
     'slow'); 
 
}); 
 

 
$(".Link3").click(function() { 
 
    $('.Box').animate({ 
 
     scrollTop: $(".Page3").offset().top}, 
 
     'slow'); 
 
});

body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.Nav{ 
 
    position:relative; 
 
    width:10%; 
 
    height:100vh; 
 
    background-color:red; 
 
    float:left; 
 
} 
 

 
.Link1{ 
 
    position:relative; 
 
    color:#FFFFFF; 
 
    text-align:center; 
 
    font-size:3vw; 
 
    cursor: pointer; 
 
} 
 

 
.Link2{ 
 
    position:relative; 
 
    color:#FFFFFF; 
 
    text-align:center; 
 
    font-size:3vw; 
 
    cursor: pointer; 
 
} 
 

 
.Link3{ 
 
    position:relative; 
 
    color:#FFFFFF; 
 
    text-align:center; 
 
    font-size:3vw; 
 
    cursor: pointer; 
 
} 
 

 
.Box{ 
 
    position:relative; 
 
    width:90%; 
 
    height:100vh; 
 
    background-color:green; 
 
    overflow-y:hidden; 
 
    float:left; 
 
} 
 

 
.Page1{ 
 
    position:relative; 
 
    width:100%; 
 
    height:100vh; 
 
    background-color:green; 
 
} 
 

 
.Page2{ 
 
    position:relative; 
 
    width:100%; 
 
    height:100vh; 
 
    background-color:gold; 
 
} 
 

 
.Page3{ 
 
    position:relative; 
 
    width:100%; 
 
    height:100vh; 
 
    background-color:gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Nav"> 
 
    <div class="Link1"> 
 
    Page 1 
 
    </div> 
 
    <div class="Link2"> 
 
    Page 2 
 
    </div> 
 
    <div class="Link3"> 
 
    Page 3 
 
    </div> 
 
</div> 
 

 
<div class="Box"> 
 
    <div class="Page1"> 
 
    Page 1 
 
    </div> 
 
    <div class="Page2"> 
 
    Page 2 
 
    </div> 
 
    <div class="Page3"> 
 
    Page 3 
 
    </div> 
 
</div>

Answer 1

あなたのコードによれば、クリックイベントの前に変数を定義する必要がありますが、実装のために@Undefitied answerが最適です。

var var1 = $(".Page1").offset().top; 
var var2 = $(".Page2").offset().top; 
var var3 = $(".Page3").offset().top; 

$(".Link1").click(function() { 
    $('.Box').animate({ 
     scrollTop: var1}, 
     'slow'); 
}); 

$(".Link2").click(function() { 
    $('.Box').animate({ 
     scrollTop: var2}, 
     'slow'); 
}); 


$(".Link3").click(function() { 
    $('.Box').animate({ 
     scrollTop: var3}, 
     'slow'); 
}); 

Answer 2

私はあなたにアンカーがスクロールするための最良の選択肢を提案してみましょう：

$(document).on('click', '.scroller-link', function() { 
    var obj = $($(this).attr('href')); 

    if (obj.size() > 0) { 
     $(selector).animate({ 
      scrollTop: obj.offset().top 
     }); 
     return false; 
    } 
}); 

（selectorを設定することを忘れないでください）

HTML：

<a class="scroller-link" href="#divID"></a> 
<div id="divID"></div>