WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

スクロールするとボタンが出てくる「Scroll to Top」

jQueryプラグイン

index.html

<script>
$(document).ready(function(){
    $("#back-top").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { //この数値で何pxスクロールしたらアイコンが現れるかを設定
                $('#back-top').fadeIn();
            } else {
                $('#back-top').stop().fadeOut();
            }
        });
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0  //戻る位置
            }, 600); //トップへ戻る速さを設定。数値が小さいほどスピードアップ。
            return false;
        });
    });
});
</script>
</head>

<body id="top">
<p id="back-top"><a href="#top"><span>Back to Top</span></a></p>
</body>
</html>

style.css

@charset "utf-8";

/*
Back to top button 
*/
#back-top {
	position: fixed;
	bottom: 50px;
	right: 180px;
}
#back-top a {
	width: 100px;
	height: 100px;
	display: block;
	background: url(img/toTop.png) no-repeat;
	text-decoration: none;
	opacity: 0.5;
}
#back-top a:hover {
	opacity: 1;
}
#back-top span {
	width: 100px;
	height: 120px;
	display: block;
	padding-top: 105px;
	font-size: 12px;
	text-align: center;
}