滚动溢出的div

Question

I am new to javascript and at the moment I am trying to learn more about it. My idea was to create a simple navigation menu plus a div which overflow is enabled and has many divs inside it. However, it seems that the code that I am using for the scrolling inside the overflowed div isn't working. I tried to fix the problem by myself but my knowledge wasn't enough.

At the bottom I will give a running sample of the the code I wrote. The problems are when you click on link "Page 2" the div is actually scrolling down to the second div. However, if you press on the link "Page 2" while you are already on this page, you will go automatically to the first div. Also when we are on "Page 2" the link for "Page 3" seems not to work. If someone could help me or at least give me some suggestions how to fix this problem I will be really grateful. Thank you in advance.

 $(".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

Let me suggest you the best option for anchor scrolling:

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

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

(don't forget to set selector )

HTML:

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

Answer 2

as per your code, you need to define variable before click event, but for implementation @Undefitied answer is best option.

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');
});