滚动到具有相同父类的下一个元素答案

【问题标题】：scroll to next element with same parent class滚动到具有相同父类的下一个元素
【发布时间】：2017-12-09 15:05:49
【问题描述】：

我有几个类名为“fullcontent”的 div。在每个 div 中，我有 2 个元素：“fullcontent--prev”和“fullcontent--next”。单击此元素时，我想滚动到下一个/上一个 fullcontent-div。

但我不明白这个：

https://jsfiddle.net/whgxauyd/1/

$(".fullcontent--prev").click(function() {
  $('html, body').animate({
      scrollTop: $('.fullcontent').nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").click(function() {
  $('html, body').animate({
      scrollTop: $('.fullcontent').nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

.fullcontent {
  z-index: 900;
  width: 100%;
  height: 100vh;
  opacity: 0.5;
  font-size: 60px;
  color: black;
  position: relative;
  background-color: yellow;
  margin-bottom: 100px;

  &--prev {
    height: 25%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    position: absolute;
    background-color: red;
    cursor: pointer;
  }

  &--next {
    height: 75%;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0.55;
    position: absolute;
    background-color: green;
    cursor: pointer;
    }
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<section>

<div class="fullcontent"> 1
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

<div class="fullcontent"> 2
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

<div class="fullcontent"> 3
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

<div class="fullcontent"> 4
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

</section>

哪里出错了？

【问题讨论】：

标签： jquery class scroll

【解决方案1】：

您必须定位特定点击元素的父元素。您可以在您的情况下使用$(this).closest('.fullcontent')。

你的代码变成：

$(".fullcontent--prev").click(function() {
  $('html, body').animate({
      scrollTop: $(this).closest('.fullcontent').prevAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").click(function() {
  $('html, body').animate({
      scrollTop: $(this).closest('.fullcontent').nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

JSFIDDLE

【讨论】：

【解决方案2】：

您没有保存对当前焦点元素的引用只需为next 添加var elementCur=$(this).parent(); 和var curElement=$(this).parent() 为prev 之类的引用，如下所示

$(".fullcontent--prev").on('click',function() {
var curElement=$(this).parent();
  $('html, body').animate({
      scrollTop: curElement.prevAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").on('click',function() {

var elementCur=$(this).parent();
  $('html, body').animate({
      scrollTop: elementCur.nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

查看演示

$(".fullcontent--prev").on('click', function() {
  var curElement = $(this).parent();
  $('html, body').animate({
    scrollTop: curElement.prevAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").on('click', function() {

  var elementCur = $(this).parent();
  $('html, body').animate({
    scrollTop: elementCur.nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

.fullcontent {
  z-index: 900;
  width: 100%;
  height: 100vh;
  opacity: 0.5;
  font-size: 60px;
  color: black;
  position: relative;
  background-color: yellow;
  margin-bottom: 100px;
  &--prev {
    height: 25%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    position: absolute;
    background-color: red;
    cursor: pointer;
  }
  &--next {
    height: 75%;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0.55;
    position: absolute;
    background-color: green;
    cursor: pointer;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<section>

  <div class="fullcontent"> 1
    <div class="fullcontent--prev">Prev</div>
    <div class="fullcontent--next">Next</div>
  </div>

  <div class="fullcontent"> 2
    <div class="fullcontent--prev">Prev</div>
    <div class="fullcontent--next">Next</div>
  </div>

  <div class="fullcontent"> 3
    <div class="fullcontent--prev">Prev</div>
    <div class="fullcontent--next">Next</div>
  </div>

  <div class="fullcontent"> 4
    <div class="fullcontent--prev">Prev</div>
    <div class="fullcontent--next">Next</div>
  </div>

</section>

【讨论】：

【解决方案3】：

index = 1;
$('div.fullcontent').click(function(){  
  $('html, body').animate({
      scrollTop: $('div.fullcontent:eq('+index+')').offset().top
  }, 1000, 'easeInOutSine');
  index++;
  if(index>3)
  index=0;
  console.log(index);
})

试试这个代码你会得到预期的结果

https://jsfiddle.net/y10dqh4q/

【讨论】：