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

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」を消す。