上へ戻る

「上に戻るボタン」を設置しましょう
jQueryを使って、下から上へゆっくり戻る
アクションを作ります。
今回は「animate」メソッドを使います。

上へ戻るアイコンを設置しましょう
</footer>の後に
<p id=“pagetop”>上へ戻る</p>
まず、HTMLで

#pagetop がクリックされたら行う処理を
書いていきましょう
<script>
//上へ戻る
$('#pagetop').click(function(){});
</script>
ここで改行して
処理を書く

animate()メソッド
$(’#pagetop').animate({
left:’+=30px’,
width:’-=5px’,
},
‘slow’
);
形や動きにアニメーションを与えることが出来ます
（＊数値を扱うプロパティのみ）
.animate({
プロパティ: 値,
プロパティ: 値
},
アニメーション時間*
);
*’slow’’normal’’fast’ ミリ秒指定

animate()メソッド
.animate({
プロパティ: 値,
プロパティ: 値
},
アニメーション時間
);
$('html,body').animate({scrollTop:0},500);
html,body要素に対してscrollTopの値を0に、500ミリ秒
かけて遷移する

完成形
<body>
<p id="pagetop”><i class="fa fa-angle-up"></i></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
2.2.4/jquery.min.js"></script>
<script>
//上へ戻る
});
</script>
</body>
</html>

スクロールしてはじめて現れるようにしてみましょう
１：スクロールしていない状態なら上に戻れないので
「上に戻るボタン」は不要なので非表示にしておきます。
２：100pxほどスクロールされると「上に戻るボタン」が現れる
という動作にしましょう
<script>
//上へ戻る
});
//あらかじめ非表示にしておきスクロールすると現れる
</script>

「上に戻るボタン」を非表示にします
<script>
//上へ戻る
});
//「上に戻るボタン」を非表示に
$('#pagetop').css('display', 'none');
</script>

スクロールすると現れる
<script>
//上へ戻る
});
//「上に戻るボタン」を非表示に
//ここにスクロールすると現れるという
//処理を書いていきます
</script>
こんどはscrollというメソッドを使います。

$(window).scroll(function(){
//ここに処理を書いていきます
});
ウィンドウがスクロールされた時に行われる処理を
書いていきましょう。
＊windowは’’(シングルコーテーション)不要
cssで使わないものなので。

if 文
if(xx) {aa}else{bb}
});
もし(XXだったら) {aaする}
さもなければ{bbする}

if($(window).scrollTop() > 100) {}else{}
});
もし(ウィンドウが100xpよりスクロールされていたら){}
さもなければ{}
if 文

if($(window).scrollTop() > 100) {
$(‘#pagetop’).fadeIn();
}else{
$(‘#pagetop’).fadeOut();
}
});
もし(ウィンドウが100xpよりスクロールされていたら){
表示する
}
さもなければ{
非表示にする
}
if 文

上へ戻る

Recommended

Recommended

More Related Content

More from sayoko miura

More from sayoko miura (20)

上へ戻る