Question

下面的代码向下滑动列表中的四个元素。这些元素当然有它的高度。所以问题是：如何向下或向上滑动元素，同时滑动页面滚动？

谢谢。

$(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>

Answer 1

我经常做类似下面的代码来获取幻灯片动画：

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

我使用上面的代码在我的标题网站上实现动画（幻灯片效果）。您可以将它用于自己的。此外，如果你想要你可以添加你的HTML代码，我可以更新答案。

我希望它有所帮助。

编辑：

基本上我在您的函数onFadeComplete()中添加了一段代码，如下所示：DEMO

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

我已将滚动设置为正文，因此在示例中不起作用，但在您的网站中应该可以正常工作。

jQuery：向下滚动并向上滚动幻灯片效果

1 个答案: