jQueryでページトップアイコン表示
まず、jqueryとアイコン画像を読み込み
/*html*/ <link rel="stylesheet" href="./fontello-ba9b6ef8/css/fontello.css"> <script src="jquery-1.11.0.min.js"></script>
styleに下記を記述し
/*css*/
.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 55px;
cursor:pointer;
}
jsに下記を記述
/*js*/
$(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 'fast');
});
});
jQeryを読み込んだ後にスクリプトを記述しないと正常に動かない。また、それでも動かない場合、jQueryのバージョンを変えてみるとよい。
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
