如何顯示更多/用溢出滾動少顯示？

Question

我有一個內容溢出的div。所以我使用show less/show more來限制某些高度的內容。

但是我的問題是，當我點擊show-more並滾動內容，並點擊show less時，出現的內容會變得凍結而不是移動到top.Is有什麼辦法可以移動到頂端onclick show在滾動的中間。

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

嘗試加入這一行的其他條件：

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