CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
George Smith
George Smith

Reputation: 505

Scroll inside an overflowed div

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>

Upvotes: 1

Views: 103

Answers (2)

Undefitied
Undefitied

Reputation: 747

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>

Upvotes: 2

Jevuska
Jevuska

Reputation: 480

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

Upvotes: 1

Related Questions