jquery で画面の一番下へスクロールさせてみた

2024年6月25日2024年11月1日

Jqueryでページトップ（一番上）へスクロールすることはよくあります。
特に長いページの場合、一瞬でトップに戻れるので重宝します。

ある時、ふと思いました。
ページの一番下へダイレクトにスクロールはできるのだろうか？

JqueryでページTOPへスクロールするには、「$(window).scrollTop(0);」と指定します。
引数として、画面位置を数字で指定します。

0ならば必然的にページTOPという意味になります。
ですが、ページの一番下は数字では簡単に表現できません。

なぜならば、制作するページによって、一番下の位置が異なるためです。

どうやれば一番下スクロールを実現できるか調べてみました。

論より証拠。完成したものがこちら

ページの一番下へスクロールするサンプル。

このサンプルでは、右側の青いボタンを押すと、画面の一番下へスクロールできています。

ページ中間部の要素を増やしても、ちゃんと一番下へスクロールします。
いったいどうやっているのでしょうか?

答え：Jqueryでbodyタグの「高さ」を引数として渡しています。

考え方

$(window).scrollTop();関数は、引数に数字を渡します。
ページの一番下の位置を数値化できれば、理屈上ページの一番下へスクロールできることになります。

ページ一番下位置の数字の求め方

ページは、bodyタグで囲われています。
つまりbodyタグの高さ　＝　ページの一番下の位置になります。
bodyタグの高さは、hegith()関数で求めることができます。
なので、引数にbodyタグの高さを渡してやれば、ページ一番下スクロールが実現できます。

bodyタグの高さは、$(‘body’).height() で求めることができます。
なので、引数としてそのまま指定すればOKです。
$(window).scrollTop($(‘body’).height());

サンプルのソース

発想と常識を組み合わせて考える

ページの一番下へスクロールすること自体は、あまり必要性がない処理です。
事実、一番下スクロールボタンを設置するwebはまずありません。

では、なぜ必要だったのか？
それは、データ入れ替えＵＰ／DOWN処理での改ページ処理に必要だったからです。

データ入れ替えＵＰ／ＤＯＷＮ処理を実装していた時に、表示位置をキープしている場合、改ページをまたがる際に表示位置が伴わない現象が起こりました。

それはそうです。一番下のデータをＤＯＷＮすると、次のページの一番上に移動するのですから。

これを何とかするためには、次のように処理する必要がありました。

• ＤＯＷＮ処理で次のページに移動する場合・・・次のページの一番上を表示
• ＵＰ処理で前のページに移動する場合・・・・・前のページの一番下を表示

ＵＰ／ＤＯＷＮ処理で改ページが伴った場合、次ページならば一番上を表示すればよい。
それは、簡単にできました。
逆にＵＰ／ＤＯＷＮ処理改ページで、前のページに戻る場合、一番下を表示しなければいけません。

この方法がすぐに思いつかず今回調査、検証を行いました。
やってみれば、簡単なことでしたが…。

scrollTop()関数の引数は、数字で指定するもの。
その常識にとらわれていたために、bodyタグの高さを指定すればよいという発想が出てきませんでした。

ただ常識を全部捨てていたら、１からオリジナルスクリプトを組み込んでいたと思います。
たった1行で解決できることに、何十時間も構築作業をすることになっていたことでしょう。

scrollTop()関数を使うことにこだわっていたからこそ、最適解が導き出せたとも言えます。
常識という下地の上に斬新な発想があってこそ、良いものができるのだと思います。