问题描述:

I have a layout scenario where a fixed arrow down is designed to smooth scroll a user to the next full height section.

Each section has a class (.section)

This works and is fairly straightforward when each section are all siblings.

There is one block of code that requires these sections to be within another div.

I have created a codepen to illustrate this http://codepen.io/chrisando/pen/GqoORa/

<a class="down">DOWN</a>

<div class="section">

Section 1

</div>

<div class="section">

Section 2

</div>

<div class="container">

<div class="section">

Section 3

</div>

<div class="section">

Section 4

</div>

</div>

<div class="section">

Section 5

</div>

My logic thus far has been.

- Add a class (.section-past) to each section once they have passed the top of the viewport.

- When the down link is clicked, find the last (.section-past) then scroll to the next .section.

This falls apart when needing to go within the container div for the next section; or when getting out of the container for the next section.

I've experimented with the .index() function for jquery, but ended up with very complicated solutions that failed. Also looked at nested conditional statements, but again ended up with very bloated failing code.

Hoping someone can point me towards the correct logic and solution.

Thanks

Chris

网友答案:

You can try to find the next element by the index, like

function sectionPosition() {
  jQuery('.section').each(function() {
    var section = $(this);
    var position = section.position().top - jQuery(window).scrollTop();

    if (position <= 50) {
      section.addClass('section-past');
    } else {
      section.removeClass('section-past');
    }
  });
}

// Run on load
sectionPosition();

// run on scroll
jQuery(window).bind('scroll', function() {
  sectionPosition();
});

var $sections = $('.section');
jQuery(".down").click(function() {
  var next;
  next = $sections.eq($sections.index($('.section-past').last()) + 1);

  if (next.length) {
    jQuery('html,body').animate({
      scrollTop: next.offset().top - 50
    }, 1000);
  }
});
.section {
  background: lightblue;
  margin: 10px;
  height: 100px;
}
.container .section {
  background: lightpink;
}
.down {
  background: red;
  width: 60px;
  height: 50px;
  line-height: 50px;
  display: block;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -30px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<a class="down">DOWN</a>

<div class="section">
  Section 1
</div>

<div class="section">
  Section 2
</div>

<div class="container">

  <div class="section">
    Section 3
  </div>

  <div class="section">
    Section 4
  </div>

</div>

<div class="section">
  Section 5
</div>


<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
相关阅读:
Top