Question

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

但我的问题是，当我点击show-more并滚动内容，并点击show less时，出现的内容会变得冻结而不是移动到顶部。有没有办法移动到顶部onclick of show less in滚动的中间。

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

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

2 个答案: