单击一个固定按钮滚动3个div

Question

这里我试图通过单击一个固定按钮来滚动三个div。 如果我在第一个div我想滚动到第二个div，如果我在第二个div我想滚动到第三个div。

$(document).ready(function() {
  var h = $(window).height();
  $(".first, .second, .third").css("height", h);
  $("#btn1").click(function() {

    if ($('.first').is(':visible')) {
      $('html,body').animate({
        scrollTop: $(".second").offset().top
      }, 'slow');

    } else if ($('.second').is(':visible')) {
      $('html,body').animate({
        scrollTop: $(".third").offset().top
      }, 'slow');

    }
  });
});

.first {
  width: 100%;
  background: white;
}
.second {
  width: 100%;
  background: grey;
}
.third {
  width: 100%;
  background: lightgrey;
}
.scrollbtn {
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="scrollbtn" id="btn1" type="button">Click Me!</button>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

Answer 1

您正在尝试使用.is(':visible')来确定元素是否在视口中;这是不正确的。 .is(':visible')对于任何未隐藏的元素（即对于文档中占用空间的任何元素 - 请参阅https://api.jquery.com/visible-selector/）都返回true，无论您是否需要滚动查看它。

相反，您想要评估$(window).scrollTop()（当前滚动位置）是否小于$(element).offset().top，即元素顶部相对于窗口的位置。

修改后的代码段

$(document).ready(function() {
  var h = $(window).height();
  $(".first, .second, .third").css("height", h);
  $("#btn1").click(function() {
    if ($(window).scrollTop() < $('.second').offset().top) {
      $('html,body').animate({
        scrollTop: $(".second").offset().top
      }, 'slow');

    } else {
      $('html,body').animate({
        scrollTop: $(".third").offset().top
      }, 'slow');

    }
  });
});

.first {
  width: 100%;
  background: white;
}
.second {
  width: 100%;
  background: grey;
}
.third {
  width: 100%;
  background: lightgrey;
}
.scrollbtn {
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="scrollbtn" id="btn1" type="button">Click Me!</button>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

Answer 2

我建议使用.eq（）或.index和.length：

＆＃13;

＆＃13;

var cur = 0,panes;
$(document).ready(function() {
  var h = $(window).height();
  $panes = $(".pane");
  $panes.css("height", h);
  $("#btn1").click(function() {
    cur++;
    console.log(cur,$panes.length)
    if ( cur>=$panes.length ) cur=0;
    if ( $panes.eq(cur-1).is(':visible') ) {
      $('html,body').animate({
        scrollTop: $panes.eq(cur).offset().top
      }, 'slow');
    }  
  });
});

＆＃13;

.pane {  width: 100%; }
#first {
  background: white;
}
#second {

  background: grey;
}
#third {
  background: lightgrey;
}
.scrollbtn {
  position: fixed;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="scrollbtn" id="btn1" type="button">Click Me!</button>
<div class="pane" id="first"></div>
<div class="pane" id="second"></div>
<div class="pane" id="third"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$(document).ready(function() {
  var h = $(window).height();
  $("#scrolldiv div").css("height", h);
  $("#btn1").click(function() {
    var s_top = $(window).scrollTop();
    $("#scrolldiv div").each(function(index){
        var item = $(this);
        var item_bottom = item.height()+item.offset().top;
        if(s_top<item_bottom)
          {
             $('html,body').animate({
        scrollTop: item_bottom
      }, 'slow');
            return false;
            }
      });
  });
});

＆＃13;

.first {
  width: 100%;
  background: white;
}
.second {
  width: 100%;
  background: grey;
}
.third {
  width: 100%;
  background: lightgrey;
}
.fourth {
  width: 100%;
  background: blue;
}
.fifth {
  width: 100%;
  background: green;
}
.scrollbtn {
  position: fixed;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="scrollbtn" id="btn1" type="button">Click Me!</button>
<div id="scrolldiv">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

它是垂直还是水平滚动？你的意思是将这三个div并排：

＆＃13;

＆＃13;

$(document).ready(function() {
  var currentSectionId = 0;
  
  $('#left').on('click', function () {
    var $contentWrapper, 
        $previousSection,
        scrollLeft;
    
    if (currentSectionId > 0) {
      $contentWrapper = $('.content-wrapper'); 
      $previousSection = $contentWrapper.children('div').eq(--currentSectionId);
      scrollLeft = $contentWrapper.scrollLeft();
      
      $contentWrapper.animate({
        scrollLeft: $previousSection.position().left + scrollLeft
      });
    }
  });
  
  $('#right').on('click', function () {
    var $contentWrapper, 
        $nextSection,
        scrollLeft;
    
    if (currentSectionId < $('.content-wrapper > div').length - 1) {
      $contentWrapper = $('.content-wrapper'); 
      $nextSection = $contentWrapper.children('div').eq(++currentSectionId);
      scrollLeft = $contentWrapper.scrollLeft();
      
      $contentWrapper.animate({
        scrollLeft: $nextSection.position().left + scrollLeft
      });
    }
  });
});

＆＃13;

html, body {
  background-color: #222;  
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

*, .border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.actions-wrapper {
  position: fixed;
}

.content-wrapper {
  white-space: nowrap;
  overflow-x: hidden;
  height: 100%;
}

.content-wrapper > div {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 30px;
}

.content-wrapper > .first {
  background-color: white;
}

.content-wrapper > .second {
  background-color: grey;
}

.content-wrapper > .third {
  background-color: lightgrey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="actions-wrapper">
  <button class="scrollbtn" id="left" type="button">Left</button>
  <button class="scrollbtn" id="right" type="button">Right</button>
</div>

  
<div class="content-wrapper">
  <div class="first">First Section</div>
  <div class="second">Second Section</div>
  <div class="third">Third Section</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或彼此之上：

＆＃13;

＆＃13;

$(document).ready(function() {
  var currentSectionId = 0;
  
  $('#top').on('click', function () {
    var $contentWrapper, 
        $previousSection,
        scrollTop;
    
    if (currentSectionId > 0) {
      $contentWrapper = $('.content-wrapper'); 
      $previousSection = $contentWrapper.children('div').eq(--currentSectionId);
      scrollTop = $contentWrapper.scrollTop();
      
      $contentWrapper.animate({
        scrollTop: $previousSection.offset().top + scrollTop
      });
    }
  });
  
  $('#bottom').on('click', function () {
    var $contentWrapper, 
        $nextSection,
        scrollTop;
    
    if (currentSectionId < $('.content-wrapper > div').length - 1) {
      $contentWrapper = $('.content-wrapper'); 
      $nextSection = $contentWrapper.children('div').eq(++currentSectionId);
      scrollTop = $contentWrapper.scrollTop();
      
      $contentWrapper.animate({
        scrollTop: $nextSection.offset().top + scrollTop
      });
    }
  });
});

＆＃13;

html, body {
  background-color: #222;  
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

*, .border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.actions-wrapper {
  position: fixed;
}

.content-wrapper {
  overflow-y: hidden;
  height: 100%;
}

.content-wrapper > div {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 30px;
}

.content-wrapper > .first {
  background-color: white;
}

.content-wrapper > .second {
  background-color: grey;
}

.content-wrapper > .third {
  background-color: lightgrey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="actions-wrapper">
  <button class="scrollbtn" id="top" type="button">Top</button>
  <button class="scrollbtn" id="bottom" type="button">Bottom</button>
</div>

  
<div class="content-wrapper">
  <div class="first">First Section</div>
  <div class="second">Second Section</div>
  <div class="third">Third Section</div>
</div>

＆＃13;

＆＃13;

＆＃13;

在评论的部分选择一个，我会详细解释它！ ：）