CODEWITHSUNDEEP
javascriptjqueryscroll
rnDesto
rnDesto

Reputation: 259

smoothscroll to target on certain div

I am trying to find element with smoothscroll effect when I click button, How I can scroll into target if target is inside div.

I'm trying this way, but didnt work. Is it possible scroll to target if its inside div

$(document).ready(function(){
  $('button').click(function(){
    $('.box').animate({
      scrollTop: $("#find").offset().top
    }, 2000);
  });
});
.box{
  clear: both;
}
.left{
  float: left;
  width: 20%;
  height: 200px;
  overflow-x: hidden;
  background-color: red;
}

#find{
  margin-top: 400px;
}

#find p{
  background-color: green
}


.right{
  float: left;
  margin-left: 10px;
  width: 50%;
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
  <div id="find">
    <p>find me</p>
  </div>
</div>
<div class="right">
  <button>jump</button>
</div>
</div>

Upvotes: 0

Views: 75

Answers (2)

frnt
frnt

Reputation: 8795

You need to add scrollTop on .left, as scrollbar appears there instead of .box i.e. overflow-y is visible and scroll-able on .left and not on .box.

$(document).ready(function(){
  $('button').click(function(){
  var bt = $("#find").offset().top;
    $('.left').animate({
      scrollTop: bt 
    }, 2000);
  });
});
.box{
  clear: both;
}
.left{
  float: left;
  width: 20%;
  height: 200px;
  overflow-x: hidden;
  background-color: red;
}

#find{
  margin-top: 400px;
}

#find p{
  background-color: green
}


.right{
  float: left;
  margin-left: 10px;
  width: 50%;
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
  <div id="find">
    <p>find me</p>
  </div>
</div>
<div class="right">
  <button>jump</button>
</div>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your logic is correct, you're just scrolling the wrong element. You need to call animate() on the .left element as that is the one which is overflowed:

$(document).ready(function() {
  $('button').click(function() {
    $('.left').animate({
      scrollTop: $("#find").offset().top
    }, 2000);
  });
});
.box {
  clear: both;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  overflow-x: hidden;
  background-color: red;
}

#find {
  margin-top: 400px;
}

#find p {
  background-color: green
}

.right {
  float: left;
  margin-left: 10px;
  width: 50%;
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="left">
    <div id="find">
      <p>find me</p>
    </div>
  </div>
  <div class="right">
    <button>jump</button>
  </div>
</div>

Upvotes: 1

Related Questions