CODEWITHSUNDEEP
jqueryscroll
Enrico
Enrico

Reputation: 13

Scroll down by one div every time I press a button

I've created a simple portfolio to display some images. I would like to add a button that scrolls down one "element" at time, like a pagedown button.

The code I have only works the first time I press the button and I can't figure why. In the console.log seem I can't get the correct y variable after the scroll occurs.

$('#gdb1').click(function() {
  var h = $(window).height();
  var y = $(document).scrollTop(); //your current y position on the page
  var inc = (h + y);
  console.log(y);

  $("#carousel").animate({
    scrollTop: inc
  }, 600);
  return false;
});
#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Upvotes: 1

Views: 272

Answers (3)

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

Try this script.

 $('.gdbutton').click(function(){
      
      if($(".element").hasClass("active")){  
      var $next;
        if($(".element.active").next().length){
        	$next = $(".element.active").next();
        }
    	else{
          $next = $('.element:first-child'); // for scrolling to top again
        }    
      }     
       $(".element.active").removeClass('active');
       $($next).addClass("active");
     
    	var offset = $($next).offset();
        $('html, body').animate({
          scrollTop: offset.top
        }, 1000);
});
html body { margin: 0px; }
#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element active"> <!-- added active class -->
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>

Upvotes: 0

Wils
Wils

Reputation: 1231

var currentElement = 0;
$('#gdb1').click(function() {

//Length subtract by one, because at the end you can't scroll down anymore
if ($(".element").length-1 > currentElement)
  $('html').animate({
        scrollTop: $(".element").eq(++currentElement).offset().top
    }, 600);
    
  return false;
});
#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

you don't need to use window height to do, all you have to do is use eq to select the element. if you want to scroll the #carousel, you have to set it to overflow: scroll-y

Upvotes: 2

Vishal modi
Vishal modi

Reputation: 1720

Try this one.

$('html, #carousel').animate({
   scrollTop: inc
 }, 600);

Check working demo.

https://jsfiddle.net/5v0np2m7/

Upvotes: 0

Related Questions