jQueryで下までスクロールした時にフッターに固定されるボタンを作る方法

Webデザインをしていて、ページトップへのボタンの見せ方が気になることはありませんか?

最近のデスクトップサイトではページトップ戻るボタンを付けているところが減っているように感じますが、スマホサイトではまだまだ見かけます。

今回フッタいい感じにフィットするボタンを作りましたのでご紹介します。

デモ

ページトップに限らず、いろいろなボタンの設置も出来るかと思うので、参考になれば幸いです。

ボタンを右下に表示させる

ボタンを右下に固定で表示させておきます。背景色や文字色はお好みで設定してください。

HTML

CSS

ボタンをフェードインで表示させる

スクロール値が120を超えた段階で、ボタンが表示されるようにします。またクリックした時にスムーズに動くように設定します。

ボタンをフッタにフィットさせる

jQueryでページ全体の高さ、フッタの高さ、ウィンドウ(ブラウザ)の高さ、スクロール量をそれぞれ取得して、フッタが見えた段階で、bottomの値が、スクロールに合わせて変動するようになっています。DOM構成時に取得するので、CSSなどで高さを固定する必要はありません。

WordPressのjQueryは$(ドル)を使えないので注意してください∠( ゚д゚)/

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバック:https://recost-design.com/1819.html/trackback