こんにちは、いとです。
先日携わらせていただいた実務で、JavaScript（jQuery）を使った続きを読むボタンを実装しました。
下記のような動きをするボタンです。
（表示サイズを0.25倍にするなどして、全体像を確認しながらお試しください）
See the Pen もっと読む、続きを読む by いと (@ykllog) on CodePen.
ロジックとしては単純で、下記の内容になります。
- あらかじめoverflow-y:hidden;で、一定の高さ（今回の場合260px）以上の要素を隠しておく。
- 「もっと見る」ボタンが押されたら、上記で設定した隠れていた要素をすべて表示できる高さに変更する。
- 「閉じる」ボタンが押されたら、heightを最初の高さ（今回の場合260px）に変更し、超えた高さの要素を隠す。
- 「閉じる」ボタンが押されたら、スクロール位置をタイトル部分へ戻す。
これによって、ボタンクリックで続きが表示され、ボタンクリックで元の位置に戻る「続きを読む」機能が実装できます。
実務の時、クリックでの展開、折り畳みはできたのですが、閉じるボタンを押してもスクロール位置を元の位置に戻す方法が浮かばなくて。
（正確には、自力で見つけたいくつかのサイトはスクロール位置が移動しなかったので、無理だと思っていました）
その旨クライアントにお伝えしたところ、参考サイトをいただけました。
いただいた参考サイトで、スクロール位置を元の位置に戻す、ではなく、特定の位置に戻す、という動作をしていたのを確認して、崩れ落ちました。
特定位置へのスムーズスクロールは、Webサイトを作成しているとかなりの確率で実装するパーツだと思います。ですがそれと、今回の元の位置に戻ると表現される動作と結び付けられなかったのです、悔しい。
自分のググり力と、既存の知識の応用力のなさを感じました。
経験あるのみ、ですね。
しかし、このコードを応用すれば、ボタンクリック式の無限スクロール？も実装できそうですね。
行数指定での続きを読むは間違いなく実装可能かと。
またゆっくり、他の続きを読むについても記述してみたいと思います。