Media Queries（メディアクエリ）でページトップに戻るボタンの位置を変えてみる

ページ右下によくある「トップに戻るボタン」。クリックするとスルスル～っとページの先頭にスクロールするやつですね。

ウィンドウの右下に固定だと、ウィンドウ幅が広いとコンテンツから離れすぎていてちょっと・・・なんてことはありませんか？
幅が広ければ、コンテンツのすぐ右辺りに表示したい！
でも、そうするとウィンドウが狭くなったときに見えなくなってしまう！！

そこで活躍するのが「@media screen and・・・」メディアクエリです。

①　ウィンドウ幅が広い時は、コンテンツのすぐ右辺りに表示。

②　ウィンドウ幅が狭い時は、ウィンドウの右下に固定。

こんな感じにしてみましょう。

#btn{
  width:100px;
  height:100px;
  position:fixed;
  bottom:50px;
}
/*-- ①　ウィンドウ幅が広い時（1201px以上） --*/
@media screen and (min-width:1201px){
  #btn{
    left:50%;
    margin-left:525px; /*コンテンツの中心からボタンまでの距離*/
  }
}
/*-- ②　ウィンドウ幅が狭い時（1200px以下） --*/
@media screen and (max-width:1200px){
  #btn{
    right:0;
    margin-left:0;
  }
}

これでjsを使わなくても、ウィンドウ幅によりスタイルを変えられます。
ワンソースでマルチデバイス対応させるレスポンシブデザインもこの方法でできますね！

またcss3がIEなど各ブラウザが対応していけば、マウスオーバーでボタンをクルクル～っとさせてみたり、スルスル～っとスクロールさせてみたりなんて動きもjs不要で、cssだけでできるようになりますね。まだまだjquery頼りですが、いつかcss3をガシガシ使える日がくるのでしょう・・・？