如何使用溢出滚动显示更少 more/show？

Question

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

但我的问题是，当我点击 show-more 并滚动内容，然后点击 show less 时，出现的内容正在冻结而不是移动到 top.Is 有什么方法可以移动到顶部 onclick在滚动中间显示较少。

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

Answer 1

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

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

scrollTop documentation

Answer 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

如何使用溢出滚动显示更少 more/show？

How to show more/show less with overflow scroll?

css

jquery

scroll

overflow

show-hide