2013.01.20
jQuery スクロールに付いてくるtopに戻るボタン
先日に引き続き備忘録なんです。
今回はこのブログのヒヨコがにょろっと横から出てきて、にやにやしながら着いてくる スクロールに追随して動く”トップに戻る”ボタンについて。
これがfooterに達したら固定しようという試みです。
元のjQueryはこちらから頂きました。多謝！！！勉強になります！
jQueryでスクロールすると表示する系いろいろ | webOpixel
上記webOpixelさんの
1.ちょっとスクロールしたら「トップへ戻るボタン」を表示
・スライドアニメーションして表示
の下からでて来るところを横からでてくるように変更させて頂いて使っております。
いまさら気付いたんですが、iPhoneのサファリで閲覧すると最下部までスクロールした時にfooterにもろかぶりです。
下になってしまうrssアイコンはあまり利用することもないと思いますが、気になるっちゃー気になる。
下までスクロールしたらfooterのちょうどいい位置にボタンが固定されるようにしたい。
webOpixelさんの同ページに“下部までスクロールすると横からスライドして表示”の例を見つけ、参考にさせて頂きました。
しかし、.scrollまわりのバグ？らしくiosのSafariでは期待通りには動きません。
Safari及び普通のブラウザでは正常に動作するのでそのまま使用。
iPhone,iPad,iPod,いちおうAndroidはデフォルトのscriptで使うことにしました。
//追記 jQuery iOSでもひよこを止めろ！
という記事を書きました。ブラウザ共通のスクリプトでひよこを止めることができました。
ひよこを止めろ
まずは使わせてもらっている部分と追加したscript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$(function(){ //トップスクロール var windowRoll = $(window), topBtn = $('#page_top'), showFlug = false, changeBottom = $('body').height() - windowRoll.height() - 190; topBtn.css('right', '-135px'); //スクロールが100に達したらボタン表示 windowRoll.scroll(function () { if ($(this).scrollTop() > 100) { if (showFlug == false) { showFlug = true; topBtn.stop().animate({'right' : '0px'}, 300); } } else { if (showFlug) { showFlug = false; topBtn.stop().animate({'right' : '-135px'}, 500); } } }); //スクロール位置によるボタンのbottom変化 windowRoll.scroll(function() { if ($(this).scrollTop() <= changeBottom) { topBtn.addClass("bottomsmall").removeClass("bottomlage"); } else { topBtn.removeClass("bottomsmall").addClass("bottomlage"); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 300); return false; }); }); |
ハイライトしたところが付け加えた箇所です。
changeBottom = $('body').height() – windowRoll.height() – 190;
bodyの高さを.height()で取得して、そこからウィンドウの高さとボタンをストップさせる位置の下からの距離を引き、基準の高さchangeBottomを決めときました。
if ($(this).scrollTop() <= changeBottom) {
んで、.scrollTop()で取得した数値がchangeBottomより小さい まだ基準までスクロールしてないとき、
changeBottomより大きい 基準までスクロールしたときを条件づけ、それぞれに用意したクラスを加えたり除いたりすることにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#page { /* position 基準 親要素 */ position: relative; } #page_top { /* ボタン */ font-size:12px; font-weight:bold; } /* 基準値までスクロールしていないとき */ #page_top.bottomsmall { position:fixed; bottom:20px; } /* 基準値までスクロールしたとき */ #page_top.bottomlage { position:absolute; bottom:190px; } |
ボタンはposition:fixedでスクロールしてもウィンドウに位置固定され、追随しているように見えてます。
基準値に達していない時は、fixedでウィンドウの下から20pxの位置に表示されます。
基準値に達した時は、absoluteで親要素に絶対配置されます。
|
1 2 3 4 |
<div id="page"> <!-- 中略 --> <div id="page_top"><a href="#wrapper">PageTop</a></div> </div><!-- /#page --> |
ios対策にデフォルトで使用
//追記 jQuery iOSでもひよこを止めろ！
という記事を書きました。ブラウザ共通のスクリプトでひよこを止めることができました。
そしてios Safari用に振り分けるため
上記jQueryの21行目からのハイライト部分に分岐とclassを追加。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//iphone android の時 高さ判定しない if (navigator.userAgent.indexOf("iPhone")>0 || navigator.userAgent.indexOf("iPad" ) >0 || navigator.userAgent.indexOf("iPod")>0 || navigator.userAgent.indexOf("Android")>0) { topBtn.addClass('i_bottom'); } else { //普通のブラウザ windowRoll.scroll(function() { if ($(this).scrollTop() <= changeBottom) { topBtn.addClass("bottomsmall").removeClass("bottomlage"); }else { topBtn.removeClass("bottomsmall").addClass("bottomlage"); } }); } |
|
1 2 3 4 |
#page_top.i_bottom { position: fixed; bottom: 190px; } |
cssは単純に重ならないようbottomのpxを増やしました。
当初fixedを忘れて悲しいことにｗ
いや〜
使わせて頂いたscriptに少々何か加えただけなんですが、相当時間掛かっちゃいました。
javascriptの基礎が全くないというのはアレです。やりながら覚えるしかないですねぇ。
スポンサーリンク
コメントをどうぞ