おぼえられないから

ただただ自分の覚え書きのためです。

個人的な覚書なので見ても役に立ちませんよ。

ページのトップに戻るボタンです。
jQueryを使いますが、難しのでコピペで簡単に行きます。

jQueryソース外部リンクを貼る
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 jQueryソース
<script>
$(document).ready(function() {
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {  ←上から100pxスクロールしたら表示する位置
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});

</script>

HTMLソース
<p class="pagetop"><a href="#wrap">▲</a></p>
※三角部分をカスタマイズした画像を置いてもいい。

スタイルシート
.pagetop {
    display: none;
    position: fixed;
    bottom: 630px;  ←画面下からの位置
    right: 156px;  ←画面右からの位置
}
.pagetop a {
    display: block;
filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
 

 参考ページ
http://www.will-hp.com/wpblog/web/149/ 

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット