垂直滚动与jQuery

时间:2018-07-23 10:02:00

标签: jquery html css

执行操作时,Jquery有问题。我无法从会话1到会话2以及相反的页面获得整页滚动效果,它只能从上到下使用,但从下到上则无效。

$(function() {
  var one = $(".one").offset().top;
  var two = $(".two").offset().top;

  $(window).scroll(function() {
    if ($('.one').scrollTop() + 1) {
      $("html, body").animate({
        scrollTop: two
      }, 2000);
    } else if ($('.two').scrollTop() - 1) {
      $("html, body").animate({
        scrollTop: one
      }, 2000);
    }
  });
});
.one {
  background-color: blue;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
}

.two {
  background-color: red;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main>
  <section class="one"></section>
  <section class="two"></section>

1 个答案:

答案 0 :(得分:1)

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
         $('html, body').animate({
    scrollTop: "0"
}, 'slow');
   }
});
.one {
  background-color: blue;
  height: 100vh;
}

.two {
  background-color: red;
  height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main>
  <section class="one"></section>
  <section class="two"></section>
  </main>