Phil Phil - 24 days ago 8
HTML Question

jQuery - scrollTo next element with class

I have something like the following HTML example

<input type="button" name"btnScroll" value="Scroll" class="scroll-button" />
<div id="builder-items-container">
<div class="item-container scroll-marker">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container scroll-marker">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container scroll-marker">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container">STUFF HERE</div>
<div class="item-container scroll-marker">STUFF HERE</div>
</div>


I want to have a button on my page that when I click it, will scroll to the next scroll-marker div. The problem I'm having is trying to get this to work even when the user manually scrolls the page. Like how can I make it so no matter where they are on the page currently, when they click my scroll button it will go to the NEXT occurrence of "scroll-marker" class?

Here is what I tried so far...

// Scroll Down button
$(document).on('click', '.scroll-button', function(e) {
if ($('.scroll-marker').eq(scrollItem).length) {
var $scrollToItem = $('.scroll-marker').eq(scrollItem);
$('#builder-items-container').animate({
scrollTop: $scrollToItem.offset().top - 150
}, 500);
// Increment our scrollItem var
scrollItem++;
} else {
// No more to scroll to - hide the button
$('.scroll-button').fadeOut(500);
}
});


The first check for the length is my attempt to HIDE the scroll button once there are NO more occurrences of ".scroll-marker" to scroll to further down the page.

If anyone can show what I am doing wrong, I would be VERY grateful.
Thank you!

Answer

Your problem with the if statement.. You can use it like this

var scrollItem = 1;
// Scroll Down button
$(document).on('click', '.scroll-button', function(e) {
      var $scrollToItem = $('.scroll-marker').eq(scrollItem);
      $('body').animate({
          scrollTop: $scrollToItem.offset().top - 150
      }, 500);
      // Increment our scrollItem var
      scrollItem++; 
      if ($('.scroll-marker').eq(scrollItem).length < 1) {
        // No more to scroll to - hide the button
        $('.scroll-button').fadeOut(500);
        scrollItem = 0;
      }
});
.scroll-button{
  position: fixed;
  top : 0;
}

.item-container{
  height: 500px;
  background: #ff0066;
}
.scroll-marker{
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name"btnScroll" value="Scroll" class="scroll-button" />
<div id="builder-items-container">
     <div class="item-container scroll-marker">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container scroll-marker">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container scroll-marker">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container scroll-marker">STUFF HERE</div>
</div>

Comments