スムーズスクロール(Back to top含む)

スムーズスクロール(Smooth scroll)の挙動について - セクションA見出し

スムーズスクロールという要素間アニメーション移動は、Webページにおけるコンテンツ移動の本来的な挙動からは外れたものということは知っておきたいところです。a要素の持つページ内遷移機能を疑似的に模してはいますが、それとは似て非なるものです。

そのためJavaScriptを用い、インタラクティブ要素として定義されたa要素の持つリンク遷移機能などのデフォルトアクションをpreventDefault()やreturn falseで停止したのちに、必要な処理設定をする手法が旧来から取られてきました。

このとき忘れられがちなのが、本来の挙動を強制的にキャンセルした結果、機能に抜けが発生したままになってしまうことです。フラグメント識別子(#~)をうんたらかんたらして、本来備えているキーボード操作等におけるフォーカス管理機能までが置き去りになっているケースがとても多いように見受けられます。

これはJavaScriptを用いて実装するインタラクティブなUIで、よく見られるケースです。スムーズスクロールであればこの点、HTMLElement.focus()メソッドを使用したフォーカスコントロールは比較的容易です。

しかし見たことがないほど斬新で、離れ技のような動きや機能を実装すればするほど、本来持つべき機能を一度止めねばならず、また再実装で回復させることが困難になる傾向があります。

では一体これの何が問題なのでしょうか。HTMLを大もととするWebアプリケーションの機能はそもそもアクセシブル&ユーザブルに設計・策定されています。JSでのカスタマイズはその機能を殺してしまっているのです。

改めてWeb = ソフトウェアデザインにおける各UIが何のために生み出され、どういった役割を担うべきなのか、立ち返って見つめ直す必要があると強く感じます。スムーズスクロールはそのもっとも単純な例として良いサンプルになるでしょう。