Question

我希望实现这样的功能，只要点击进入，页面就会自动滚动到底部的下一个div。这是小提琴文件demo。提前谢谢你。

<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>

Answer 1

您可以这样做：

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

Answer 2

你几乎在那里.scrollTop改为.top而不是

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

这一行

var prev = $('.wrapper2');

这里是updated fiddle

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

滚动到下一个div

2 个答案: