ほとんどの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;に変更してボタンの動きを直すことができました。
滅多に発生する問題ではないですが、これを見た方のお役に立てれば幸いです。
