如何通过溢出滚动显示更多/显示更少？答案

【问题标题】：How to show more/show less with overflow scroll?如何通过溢出滚动显示更多/显示更少？
【发布时间】：2016-08-19 11:02:19
【问题描述】：

我有一个div，内容溢出。所以我使用 show less/show more 限制了具有一定高度的内容。

但我的问题是，当我点击显示更多并滚动内容，然后点击显示更少时，出现的内容会冻结而不是移动到顶部。有没有办法在点击显示更少时移动到顶部滚动的中间。

$("div.show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();
  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.removeClass("hideContent").addClass("showContent");
  } else {
    linkText = "Show more";
    $content.removeClass("showContent").addClass("hideContent");
  };

  $this.text(linkText);
});

body {
  padding: 5%;
}

.hideContent {
  overflow: hidden;
  height: 30px;
}

.showContent {
  max-height: 40px;
  overflow-y: auto;
}

.show-more {
  padding: 10px 0;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>
<div class="text-container">
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>
<div class="text-container">
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

Fiddle here

【问题讨论】：

标签： jquery css scroll overflow show-hide

【解决方案1】：

您可以使用jquery函数scrollTop(0)在隐藏内容之前滚动回顶部：

$content.scrollTop(0).removeClass("showContent").addClass("hideContent");

scrollTop documentation

【讨论】：

【解决方案2】：

尝试将此行添加到 else 条件：

$('.content').animate({scrollTop : 0},800);

你会得到一个这样的脚本：

$("div.show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();
  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.removeClass("hideContent").addClass("showContent");
  } else {
    linkText = "Show more";
    $content.removeClass("showContent").addClass("hideContent");
        $('.content').animate({scrollTop : 0},800);
  };
  $this.text(linkText);
});

还有一个DEMO

【讨论】：