{{date}} {{catName}} {{title}}

スムーススクロールというのは、正式名称ではありませんが、ページ内リンクや「TOPに戻るボタン」などで、ページをスクロールして移動する機能のことを意味します。
割とどんなWEBサイトでも見かけますし、当たり前のように使っているので気にすることは無いと思いますが、実はブラウザにはスクロールして移動する機能は備わっていないので、都度自分で用意する必要があるのです。

本来のページ内移動

例えば、ページの一番上に戻るリンクを作成します。デフォルトでは瞬時にページの一番上に戻ります。
ページの一番上に戻る
ブラウザにもともと備わっているページ内移動は、これだけです。
そこで、スムーススクロールを利用するためには、HTMLコーダーがなんらかの手段を使って、機能を組み込むこととなります。

一般的にはjQueryというライブラリを使用して、スムーススクロールの機能を作成することが多いのですが、当サイトではjQueryを使用しておらず、スムーススクロール機能は全て自前で用意しております。jQueryよりも軽量で負荷の少ない方法になっておりますので、その辺の仕組みを解説してみたいと思います。

専門的な話ではなく、考え方の話なのでお気軽にご覧ください。

まずは座標の話

パソコンやスマートフォンのモニターは、小さな色の付いたドット（点）が集まって画面を映しています。
ブラウザのWEBページが表示されている部分も当然ドットの集合なのですが、このドットは、ページ内の座標や大きさを示す方法としても使われています。

1つのドットを1ピクセルという単位で表し、WEBページの内部を測るために使われています。
例えば、下のジンくん画像の大きさは、幅200ピクセル、高さ240ピクセルとなっています。

また、座標についてもピクセルで表すことができ、ページの一番上が、Y座標0ピクセルとなり、そこから下に向かって1ピクセルずつ増えていきます。ページ内のすべての画像や文字の位置は、ページ上部のからどれくらい離れているかという座標で示すことができるようになっています。

座標は表示している環境によって変わりますが、今、私がこの記事を入力している環境では、上のジンくん画像は、ページの最上部から1940ピクセルの位置に表示されております。

ページ内部を移動するときは、座標を指定する

基本的に、ページ内を移動する場合は、ページの目的の場所をY座標で指定して、その座標がブラウザの上端に来るように命令します。
こうすることでページ内を移動することができるわけですが、当然これではスムーススクロールになりません。

一般的なスムーススクロール

一般的なスムーススクロールの処理は、以下のような流れになります。

1. 目的地のY座標を取得する
2. 現在、ブラウザの上端がページのトップから何ピクセルの位置にあるか取得する（現在地のY座標）
3. 現在地のY座標と目的地のY座標の距離を取得
4. 3の値の何パーセントかの距離を、目的地に向かって移動する
5. 1/60秒程度のスピードで、上記2～4を繰り返す。
6. 現在地のY座標と目的地のY座標が同じになったら処理を止める

つまり、1秒間に60回ほど、ページをちょっとずつ動かすことで、スムースに流れているように見せているわけです。
また、目的地と現在地が近くなったら、移動の距離を少しずつ減らすことで、ゆっくり止まるように見せることも可能になります。

例えば、目的地と現在地の距離の10％づつ移動するとします。現在値の座標が100ピクセル、目的地の座標が1000ピクセルとした場合、初動では(1000-100)*0.1 となり90ピクセル移動することになります。
移動後、現在地のY座標は190ピクセルとなるので、次は (1000-190)*0.1 で81ピクセル移動することになります。
これを繰り返すことで目的地に近づくにつれ、移動距離が減るため、ゆっくり止まるように見えるようになります。（※実際にはもう少し細かい処理が必要です。）

ただし、この方法は、移動する度に現在地と目的地の距離を測り次の移動距離を計算するため、移動と計算を交互に繰り返すこととなります。
そうなると、よりブラウザの負担も増えるため、できるならもう少しシンプルにする方が望ましいです。

改善方法

当サイトで行っている方法は、非常にシンプルです。

まず、現在地と目的地の中間の距離を出します。
前述の例の場合だと距離の半分は、(1000-100)/2 で450となり、中間のY座標は550ピクセルとなります。

次に、現在地から目的地に向かって1ピクセル移動します。
その次は２ピクセル、そしてその次は4ピクセルというように、移動距離を倍々で増やしていき、中間地点に来るまで繰り返します。
移動するY座標は、100、101、102、104、108、116、132、164、228、356となります。
中間を超えたら、移動距離を半分にしながら進んでいきます。
移動するY座標は、744、872、936、968、984、996、998、999、1000となります。

この方法で移動を行うと、最初はゆっくり動いて途中は早く、最後はゆっくり止まるという動きになります。
そして最も良い点は、計算が非常にシンプルだという点です。n=1から始まり、最初のY座標にnを足し、同時に目的地のY座標からnを引く。nを倍にして同じことを繰り返すだけで移動に必要な全ての座標を取得できます。
なので移動前に全て計算を終わらせて、移動を始めたらブラウザは移動の処理のみ行えば、ブラウザの負担は最初に紹介した方法よりも軽減されることになります。

試してみよう

ここまで解説を読んだ方は、どんな動きになるのか見たくなるのではと思います。
ページの右側に「CHAPTER」という項目があり、ページ内移動できる機能がついております。
記事の中で解説した方法を実際に使っておりますので、ぜひ動きの方を試してみてください。