スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ページトップまでスクロールするボタンの作成方法(jQuery,css)

ページトップまでスクロールするボタンの作成方法

ある程度までスクロールするとページトップに戻るボタンを出現させます。


HTML
<p class="pagetop"><a href="#wrapper">▲</a></p>

解説
三角形を表示しデザイン部分はCSSにて記述いていきます。
画像を使用する場合は、▲部分に画像を指定してください。
#wrapperは戻る位置の例


CSS
.pagetop {
 position: fixed;
 bottom: -40px;
 right: 50px;
}
.pagetop a {
 display: block;
 width: 50px;
 height: 50px;
 background-color: #595757;
 border-radius: 50px;
 text-align: center;
 color: #fff;
 font-size: 24px;
 text-decoration: none;
 line-height: 50px;
}

解説
ボタンの色や形、▲の位置などを設定します。
position: fixed; で右下へ固定配置をしています。



jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
 var flag = false;
 var pagetop = $('.pagetop');
 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   if (flag == false) {
    flag = true;
    pagetop.stop().animate({
     'bottom': '0'
    }, 200);
   }
  } else {
   if (flag) {
    flag = false;
    pagetop.stop().animate({
     'bottom': '-40px'
    }, 200);
   }
  }
 });
 pagetop.click(function () {
  $('body, html').animate({ scrollTop: 0 },300);
  return false;
 });
});
</script>


解説
if ($(this).scrollTop() > 100) {   の100は
上から100pxスクロールした時に表示されます。

$('body, html').animate({ scrollTop: 0 },300); の300は
スクロールで戻る際の速度です。

数字でいうと200という数字が2箇所にあるかと思います。
はじめに出てくる200はボタンを出現させる時の出現速度です。
後の200は、手で上にスクロールした際にボタンを隠す時の消滅速度です。



参考デモサイト

参考URL
http://www.nxworld.net/tips/page-top-appears-scroll.html





スポンサーサイト

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。