javascriptでページのTOPへスクロール_技術三昧ブログ

ホーム » ブログ » javascriptでページのTOPへスクロール

@2015/01/04

javascriptでページのTOPへスクロールコードです。
DEMO


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jqueryでページトップへスクロール</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
#back-top {
    position: fixed;
    bottom: 1%;
    right: 1%;}
#back-top span {
    width: 48px;
    height: 28px;
    display: block;}
</style>
<script>
	$(document).ready(function(){
	// hide #back-top first
	$("#back-top").hide();  
	// fade in #back-top
	$(function () {
	$(window).scroll(function () {
	if ($(this).scrollTop() > 100) {
	$('#back-top').fadeIn();
	} else {
	$('#back-top').fadeOut();
	}
	});
	// scroll body to 0px on click
	$('#back-top a').click(function () {
	$('body,html').animate({
	scrollTop: 0
	}, 600);
	return false;
	});
	});
	});
</script>

</head>
<body>
ページのヘッダーへスクロールできるコードです。<br>
※下へ移動したら、トップへスクロールアイコンが表示される。<br>
アイコンをクリックしたら、ページのTOPへ移動する。<br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<p id="back-top">
<a href="#top">
	<span>
		<img src="http://www.zanmai.net/images/test/to_top.png" style="width:48px; height:48px">
	</span>
</a>
</p>
</body>
</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/225.html

閉じる

javascriptでページのTOPへスクロール_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！