全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
ページトップボタンが色々な出現をするスムーズスクロール
2018.09.10
※この記事は2018年09月10日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
今回は、スムーズスクロールについてです。
スムーズスクロールは、ページをページ下部へスクロールし、ページ上部へ戻る際、
「ページトップ」ボタンをクリックすることで、スルスルとゆっくり戻る動作を指します。
設置する際、
【目次】
パターン1. フェイドして現れるボタン
パターン2. 下から現れるボタン
パターン3. 右から現れるボタン
右から出現するパターンの場合、
position:fixed;を指定している要素に、
right:-「ページトップ」ボタンの幅サイズ;
を指定します。
今回の場合、ボタンの幅が100pxですので、指定は「-100px」となります。
まとめ
設置する機会が多いと思いますので、
是非、参考にしてみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
