CODEWITHSUNDEEP
jquery
Harshit
Harshit

Reputation: 286

Scroll to the next div

I want to achieve something like this ,as soon as i click on click to proceed , the page should automatically scroll to bottom to the next div. Here is the fiddle file demo . thank you in advance.

<div class="wrapper">

  <div class="ab">
    div 1
    <div class="c_btn">
      click to proceed

    </div>
  </div>


  <div class="wrapper2">
    welcome the next screen
  </div>
</div>

Upvotes: 0

Views: 80

Answers (2)

user7551674
user7551674

Reputation:

You can do something like this: 

$('.control-btn').on('click', function() {
  var ele = $(this).closest("section").find(".container");
  $("html, body").animate({
    scrollTop: $(ele).offset().top
  }, 100);
  return false;
});

Upvotes: 2

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

You almost there the .scrollTop changed to .top and in place of

var prev = $('this).parent().find("planwrapper_2"');

this line 

var prev = $('.wrapper2');

Here's the updated fiddle

$(".c_btn").click(function() {
  var prev = $('.wrapper2');
  $("html, body").animate({
    scrollTop: prev.offset().top
  }, 2000);
});


$(".c_btn").click(function() {
  var prev = $('.wrapper2');
  $("html, body").animate({
    scrollTop: prev.offset().top
  }, 2000);
});
.ab {
  background-color: red;
  padding: 100px;
  height: 100vh;
}

.c_btn {
  cursor: pointer;
  padding 10px;
  width: 200px;
  background-color: white;
  height: 30px;
}

.wrapper2 {
  padding: 20px;
  background-color: blue;
  height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="ab">
    div 1
    <div class="c_btn">
      click to proceed

    </div>
  </div>
  <div class="wrapper2">
    welcome the next screen
  </div>
</div>

Upvotes: 1

Related Questions