スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール）
（”追記”書きました。）
下にスクロールすると横にtopへ戻るボタンを表示させるjQueryのコードのチュートリアルが公開されていましたのでメモ。
チュートリアルページ→webdesignerwall
チュートリアルdemo→demo
上記のページに設置方法も詳しくのっています。デモコードと画像のダウンロードもできます。
チュートリアルページに公開されているCSSのコードとjQueryのコードをヘッド内で読み込み、
下記の例のように、body内のスクロールさせたい要素に”back-top”とidをふり空のspanを入れます。
<p id="back-top"> <a href="#top"><span></span>Back to Top</a> </p>
このspanの部分がスクロールボタンになります。
CSSをいじればスクロールボタンの位置やデザインなど変更できます。
↓↓Demoを作りました
デモページ
チュートリアルのものよりシンプルにし、ホバー時の変化等もなくし画像だけにしました。
＜!ーー 2013/02/11追記 ーー＞
webdesignerwallさんのコードをそのまま使った場合に、ページトップへ戻る際のアニメーションに不具合が起こるとご指摘頂きました。
以下のようにアニメーションの fadeout() に stop() を追加する事で回避できます。
（教えて頂きありがとうございました！）
$(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').stop(true, true).fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
＜！ーー 2013/02/11追記ここまで ーー ＞
下記head内のコードです
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Back to Top デモ</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<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
}, 800);
return false;
});
});
});
</script>
</head>
body内のコードです。
<body> <div id="content"> <center><p><img src="images/demopage.png"></p></center> <h1>Title1</h1> <p><img src="images/photo1.jpg" alt="" /></p> <p> (略) </p> <h1>Title2</h1> <p><img src="images/photo2.jpg" alt="" /></p> <p> (略) </p> <h1>Title3</h1> <p><img src="images/photo3.jpg" alt="" /></p> <p> (略) </p> <p id="back-top"> <a href="top"><span></span></a> </p> </div>
CSSのコードです。
position: fixed;
bottom: 30px;
margin-left: -100px;
}
#back-top a {
width: 100px;
display: block;
}
#back-top span {
width: 100px;
height: 100px;
display: block;
margin-bottom: 7px;
background: url(images/gotop.png) no-repeat center center;
}
参考になりました。
ありがとうございます。
コメントありがとうございます！
少しでも参考になれば嬉しいです（＾ー＾）
これIEだと動作不安定になりますね。
フェードインの時にアイコン編集中に作ったパスのような物が浮かび上がったり。
こちらのサイトでも表示されていないようで・・・。
フェードイン・アウトはIE8以下ではサポートされていないので表示がおかしいのでしょうか…？このブログ自体はIEでの表示確認は行なっていないので、IEでの挙動は把握していないのですが、コード自体は以前使用した時にIE7以上で正常に使用できた覚えがあります…どのような状況で不安定になるのかはすみませんわかりません。
$(document).ready(function(){});
と、
$(function(){});
は同じ意味なので、
さらに短縮できませんか？
$(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').stop(true, true).fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function(){
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});