Edited at

jqueryでページトップを使用する(例)

More than 1 year has passed since last update.

ページトップの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」を消す。