ホーム >

WordPress >

WordPrssで使える To Top のjQuery

公開日:  2015/06/06　    最終更新日: 2015/11/16        0    0    0    2       

<div id=”page-top”><a href=”#”> TOP ↑</a></div>

この記述でトップに戻るボタンをつけています

トップページを開いた時には表示させなくて
少しスクロールしたら表示させるスクリプトです

初めて書いたので動くかどうか心配でしたが
無事動作確認出来てます

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
$(window).scroll(function(){
	if ($(this).scrollTop() > 100) {
	  $('#page-top').fadeIn();
}
	else {
	  $('#page-top').fadeOut();
}
});

     $('#page-top').click(function () {
	$('#page-top').fadeOut('slow');
     });
</script>

<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>

ここは、
<script src=”//code.jquery.com/jquery-1.11.3.min.js”></script>
の方がいいのかもしれません

ゆっくりトップにスクロールするスクリプト

$('#page-top').click(function(){
        $('html,body').animate({
            scrollTop: 0
        }, 300);
        return false;
});