Jquery scroll down section-by-section dynamically

Question

I have the following code which onClick scrolls the user down section-by-section until the bottom:

var currentSection = 0;
var totalSections = document.querySelectorAll("section").length;
$(document).on('click', '.cd-go', function(event){                        
    event.preventDefault();
    var viewportHeight = $(window).height();
    currentSection++;
    if (currentSection > totalSections - 1) currentSection = totalSections - 1;
    $('html, body').animate({
        scrollTop: viewportHeight * currentSection
    }, 500);
});

This works fine, although I would like to achieve the functionality that when the user scrolls back up somewhere then onClick it would scroll down to the next closest section not to the bottom like currently.

Any advise on achieving this? I am unable to implement it further at the moment.

Here's a fiddle of the current: http://jsfiddle.net/cyt57dsj/43/

Answer 1

This works. Just add an each loop in the existing code. On click, it gets the first section visible on the viewport and scrolls to the next section.

var currentSection = 1, totalSections = document.querySelectorAll("section").length;

$(document).on('click', '.cd-go', function(event){
    event.preventDefault();
    currentSection=1;
    $("section").each(function(){
        if(($(this).offset().top+$(this).outerHeight())>$(window).scrollTop())
        {
          currentSection=parseInt($(this).attr("id").replace("section",""));
            return false;
        }
    });
    currentSection++;
    if(currentSection>totalSections)
    {
        return;
    }
    $('html, body').animate({
        scrollTop: $("#section"+currentSection).offset().top
    }, 500);
});

.cd-go {
    width: 209px;
    background: rgba(0,0,0, 0.17);
    height: 212px;
    border-radius: 212px;
    color: #fff;
    position: fixed;
    bottom: -106px;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.w-sec {
  height:100vh;
}
.w-sec:first-of-type {
  background:#fff;
}
.w-sec:nth-of-type(2) {
  background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cd-go">
			DOWN
</a><!-- scroll btn -->

<section id="section1" class="w-sec cd-section">
	content
</section><!-- section 2 -->

<section id="section2" class="w-sec cd-section">
	content
</section><!-- section 2 -->

<section id="section3" class="w-sec cd-section">
	content
</section><!-- section 2 -->

Answer 2

You can do something like this, if it works for you.

Fiddle for the below code: http://jsfiddle.net/cyt57dsj/159/

var currentSection = 1;
var totalSections = $('.cd-section').length;
var currpos = $(window).scrollTop();

setInterval(scrolllistener, 1000);

function scrolllistener() {
    var testpos = $(window).scrollTop();
  // has scrolled
  if (testpos != currpos) {
    // scrolled down
    if (testpos > currpos) {scrolltosection(currentSection+1);}
    // scrolled up
    else {scrolltosection(currentSection-1);}
  }
}

function scrolltosection(number) {
    currentSection = number;
    $('html, body').animate({
    scrollTop: $('#section'+number).offset().top
  }, 300, function() { currpos = $(window).scrollTop(); });
  if (number < totalSections) {
    $('.cd-go').show();
  } else {
    $('.cd-go').hide();
  }

}

$('.cd-go').click(function() {
    var newnumber = currentSection+1;
  if (newnumber > totalSections) {}
  else {
        scrolltosection(newnumber);
  }
});

I didn't change your HTML or CSS code. I've set an interval to check for scrolling, it's less resource intensive than a .scroll() event listener.

Essentially it looks for the section number that you scrolled to last and if you scrolled up, sends to to n-1 and down n+1. It also shows and hides the button depending on your position on the page.

Answer 3

So the solution to this is that each time you click on the next button, you have to check which section is in the viewport.

Based on that, you have to scroll to the next section.

Here is the jQuery code

var currentSection =    1;
var nextSection = 0

$(document).on('click', '.cd-go', function(event){  
        var sec = 1;
    event.preventDefault();
    $("section").each(function(){
        if($(this).inView()){
        currentSection = sec;
        console.log('currentSection =',currentSection);
      }else{
      sec++
      }
        });
    nextSection = currentSection+1;

    var os = $('#section'+nextSection).offset();

    $('html, body').animate({
    scrollTop: os.top,
    scrollLeft: os.left
});
});

$.fn.inView = function(){
   var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

Please let me know if this works for you. Here is the fiddle