さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】トップリンクボタンをスクロールで表示させる

Pocket
LINEで送る

ページのトップへ移動するトップリンクボタン、ある程度ページを下へスクロールしないと必要ないですよね。ということで、トップリンクボタンを画面が下へスクロールされると表示されるようにJQueryで実装します。

HTML

<p class="topLink"><a href="#top">ページトップへ</a></p>

CSS

.topLink {
  display:none;
  width:50px;
  height:50px;
  background:url(img/top_link_button.png) no-repeat 0 0;
  text-indent:-9999px;
  position:fixed;
  right:10px;
  bottom:60px;
  z-index:2;
}

.topLink a {
  display:block;
  width:50px;
  height:50px;
}

CSSは「position:fixed;」に指定し、「display:none;」で非表示にしておきます。

JQuery

<script>
$(document).ready(function() {
	var pagetop = $('.topLink');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) { // ボタンが表示されるスクロール量(100の部分)
			pagetop.fadeIn(); // fadeIn(500)などとすれば速度指定できる
		} else {
			pagetop.fadeOut(); // fadeOut(500)などとすれば速度指定できる
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500); // スクロースされる時の速度(500の部分)
		return false;
	});
});
</script>

参考サイト

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容