jqueryでページトップを使用する（例）

ページトップのJSを使用する場合（例）

定義側js↓

pageTop.js

$(window).load(function(){
  function pageTop () {

    var $main         = $('html, body');
    var $pTop         = $('.pagetop');
    var $header       = $('header');
    var $scrollPos    = '';
    var $headerHeight = $header.outerHeight();
    var $headerOfset  = $headerHeight + $header.offset().top;


    //ページトップボタン非表示
    $pTop.hide();

    $(window).on('scroll', function() {

        $scrollPos = $(this).scrollTop();

        if ($headerOfset < $scrollPos) {
            $pTop.fadeIn();
        } else {
            $pTop.fadeOut();
        }

    });

    $pTop.on('click', function() {

        $main.animate({
            scrollTop:$main.offset().top
        }, 2000, "easeOutQuint");

        return false;

    });

  }
});

呼び出し側js↓

common.js

$(window).load(function(){
  pageTop();
});

定義側html↓

index.html

<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script src="./js/pageTop.js"></script>

jquery.easing.1.3.jsは別に読まなくてもページトップのjsを使用できるが、easingを使用する際は必須。
もし、必要ないなら、「easeOutQuint」を消す。