Web blog WEBブログ

ページトップボタンが色々な出現をするスムーズスクロール

2018.09.10

こんにちは。コーダーの兼山です。

今回は、スムーズスクロールについてです。

スムーズスクロールは、ページをページ下部へスクロールし、ページ上部へ戻る際、
「ページトップ」ボタンをクリックすることで、スルスルとゆっくり戻る動作を指します。

設置する際、タグ内へJqueryの指定を忘れないようにしてください。

パターン1. フェイドして現れるボタン

パターン2. 下から現れるボタン

パターン3. 右から現れるボタン

右から出現するパターンの場合、
position:fixed;を指定している要素に、

right:-「ページトップ」ボタンの幅サイズ;

を指定します。
今回の場合、ボタンの幅が100pxですので、指定は「-100px」となります。

まとめ

設置する機会が多いと思いますので、
是非、参考にしてみてください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口