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ご指摘あればをお願いします。

(件名or本文内でキーワード検索できます)



  • << 前のページ
  • 次のページ >>
ページトップへ