スクロールすると一定の距離で「上へ戻るボタン」がフェードイン。Animated Scroll to Top。Ajax
公開日：
:
Ajax
スクロールしていくと「上に戻るボタン」がフェードインし、しかもスルスルスクロールする、アニメーションスクロール。
最近流行のアニメーション「上に戻るボタン」の設置方法
とても簡単な記述、コピペで設置できます。
まずはヘッダーでjqueryを読み込み。
以下のスクリプトを設置
<script>
$(document).ready(function(){
// hide #backtop first
$("#backtop").hide();
// fade in #backtop
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#backtop').fadeIn();
} else {
$('#backtop').fadeOut();
}
});
// scroll body to 0px on click
$('#backtop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
100のところはボタンがアニメーションで現れるまでのスクロール距離。
800のところはスルスルスクロールのスピード。
数字を上げるとゆっくりになります。
bodyタグに
<body id="pageTop">
上に戻るボタン部分に
<p id="backtop"> <a href="#pageTop">【上に戻るイメージ画像など】</a> </p>
関連記事
記事はありませんでした
新着記事
-
-
古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件
2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9.3.5止まりのiPad初期型...
-
-
WordPressのエラーを表示させる。白紙状態になったとき。
WordPressのテーマ制作などでfunction.phpの編集やプラグインのインストールなどして...
-
-
Dreamweaver CC 2017 正式リリース、早速使ってみた！
一昨日、Dreamweaver CC 2017 が正式にリリースされました。 夏前よりBeta版を...
-
-
Windows10 フリーズしたように動作が重くなる現象と対策！
先日、Windows 10 Anniversary Updateをしたばかりですが、その後突然フリー...
-
-
【突然くるぞ！】 Windows 10 Anniversary Updateで2時間以上お仕事ストップ！
Microsoftさんがまたヤッてくれました。 お仕事中にアプリケーションが重たくなってきたの...
PREV :
NEXT :
