コーディング

フッターで止まる「トップへ戻るボタン」が突然消える問題について

  • このエントリーをはてなブックマークに追加

ほとんどのwebサイトで様々な形で実装されている「トップへ戻るボタン」

その中にはページスクロールの途中でスーッっと現われてフッター上でピタッと止まるような少し複雑な仕組みのボタンもあります。

今回はそんなトップへ戻るボタンのお話です。

それは『トップへ戻るボタン フッターで止まる』などで検索をかけるとたくさんの情報が出てきて、そのjsとcssをコピペするだけで簡単に実装することが出来ます。

一言にトップへ戻るボタンといっても様々なタイプのものがあるのですが、body要素の直下にHTMLを差し込むタイプのものが(個人的には)比較的手っ取り早く実装できます。

しかしそのタイプのjsには大きな、いや小さな罠があります。

それは以前、業務の中でその問題が発生しました。
その問題というのはトップへ戻るボタンがフッター上までスクロールすると、急に消えるというものです。

結果から話すとそれはjsではなくcssの問題で、少し調整することで簡単に直るものなのですが、あまりにも単純な不具合のため検索をかけても全然ヒットしなくて当初はなかなか直すことが出来なくてかなり頭を悩ませていました。

最終的に検索することを諦めて自力で原因を探してたどり着いた答えはただ一つ。
この不具合の原因は元々html要素とhead要素にheight:100%;が指定されていたことです。

トップへ戻るボタンのjsの仕様でフッターの上でposition:fixed;がposition:absolute;に置き換わります。

その時にhtml、head要素にheight:100%;が指定されていると画面の高さまでposition:absolute;が指定されている要素が一瞬で戻ってしまうわけです。

その時に担当していた案件ではhtml、head要素にheight:100%;がいなければいけない理由は特になかったのでheight:auto;に変更してボタンの動きを直すことができました。

滅多に発生する問題ではないですが、これを見た方のお役に立てれば幸いです。

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ