CODEWITHSUNDEEP
javascriptjquery
Artem Z
Artem Z

Reputation: 565

jQuery: Scroll down and scroll up with slide effect

The code below slides down and up four elements of the list. These elements, of course has its height. So the question is: how to slide down or up elements and at the same time slide page scroll?

Thank You.

$(document).ready(function() {
  var list = $(".partners__ul li");
  var numToShow = 4;
  var button = $(".partners__button__a");
  var numInList = list.length;
  var isShowing = true;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    if (isShowing) {
      list.slice(showing - 1, showing + numToShow).fadeIn(100, onFadeComplete);
    } else {
      list.slice(showing - numToShow, numInList).fadeOut(100, onFadeComplete);
    }


  });

  function onFadeComplete() {
    var nowShowing = list.filter(':visible').length;

    if (nowShowing == numInList && isShowing) {
      isShowing = false;
      button.text("Show less");
    } else if (isShowing) {
      button.text("Show even more");
    }

    if (nowShowing == numToShow) {
      button.text("Show more");
      isShowing = true;
    }

  }
});
.partners__ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners__ul li {
  position: relative;
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul class="partners__ul">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
  <button class="partners__button__a">Show More</button>
  <button class="partners__button__a_less" style="display:none">Show Less</button>
</div>

Upvotes: 0

Views: 119

Answers (1)

gon250
gon250

Reputation: 3545

I often do something like the code below to get the slide animation: 

$(".scrollto").click(function(e) { 
       var btn = $(e.currentTarget);
        $('html, body').animate({
            scrollTop: $(btn.attr("href")).offset().top 
        }, 1000);
    });

I use the code above to implement animations(slide effect) to my header website. You can use it for your own. Also if you want you can add your html code and I can update the answer.

I hope it's helps.

EDITED:

Basically I have added a piece of code in your function onFadeComplete() as you can see below: DEMO

$("html, body").animate({ scrollTop: $('.partners__ul li').last().offset().top }, 1000);

I have set the scroll to the body so in the example is not working but in your website should work fine.

Upvotes: 1

Related Questions