jQueryを使用したスクロールすると表示されるpagetopアイコン

アイコンの画像を用意してページ右下に表示する

HTML

<a href="#top" class="pagetop"><img src="../img/pagetop.png" height="52" width="95" alt="PAGETOP"></a>

id="top"までスクロールするのでwrapperなどにidを指定しておく。

CSS

.pagetop {
  position: fixed;
  right: 20px;
  bottom: 0;
  width: 92px;
  height: 49px;
  display: block;
  z-index: 10;
}

position: fixed;でウインドウの右下に固定表示されるように指定する。

jQuery

//pagetop
$(document).ready(function() {
    var pagetop = $('.pagetop');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 700) {
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        $('body, html').animate({ scrollTop: 0 }, 500);
        return false;
    });
});

        if ($(this).scrollTop() > 700) {

でスクロール距離を指定。この場合700pxスクロールするとpagetopボタンが表示される。