1
要素のリストを含むdivがあります。デフォルトでは、リストには3つの要素しか表示されず、「その他の」リンクをクリックするとさらに多くの要素を表示できます。要素を隠すときにスクロールを保持する
同様に、「Less」をクリックすると、最初のビューに戻ることができます。
問題
私は「少ない」をクリックすると、「詳細」ボタンはもうビューポートではありません。私は項目のリストを見るために上にスクロールする必要があります。
「Less」をクリックした後で、ビューポートに項目のリストを表示する方法はありますか？
.containerはposition: relativeである必要があります。
$(function() {
$('.js-more-less').on('click', function (e) {
$(this).closest('.js-hidden-group').toggleClass('_shown');
return false;
});
});.container {
position: relative;
}
.js-hidden-group .-item {
display: none;
}
.js-hidden-group .more {
display: block;
}
.js-hidden-group .less {
display: none;
}
.js-hidden-group._shown .-item {
display: block;
}
.js-hidden-group._shown .more {
display: none;
}
.js-hidden-group._shown .less {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="js-hidden-group">
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<div class="-item">Some element</div>
<a href="#" class="js-more-less more">More</a>
<a href="#" class="js-more-less less">Less</a>
</div>
</div>
<br/>
<br/>
<div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
<div>Some other stuff</div>
</div>
「もっと」をクリックした瞬間にスクロール位置を保存し、次に「小さい」をクリックしている間にスクロールを保存した位置に追加し、値を忘れることはありません。いくつかのエラーを防ぐため、使用後は削除する必要があります。 – Sergey
質問にjavascript/jqueryタグを追加してください – Dekel