プラグイン不要のjquery簡単スクロールトップ

jqueryのプラグインを使わず簡単なjavascriptとcssで実現可能。

サンプルページ

まずはjqueryを読み込む

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

一定の範囲スクロールしたらボタンを表示させ、クリックでページトップへスクロールするjavascriptを読み込む

JAVASCRIPT

<script type="text/javascript">
$(function(){
$('#top-link').hide();
$(window).scroll(function(){
if($(this).scrollTop() > 50){
$('#top-link').fadeIn(1000);
}else{
$('#top-link').fadeOut(500);
}
});
$("#top-link").click(function(){
$('html, body').animate({scrollTop:0},300);
});
});
</script>

解説

スクリプト内の数字「50」は、ページが何ピクセルスクロールされたら処理を行うかの数値
スクリプト内の数字「1000」はボタンがフェードインする速度
スクリプト内の数字「500」はページトップでボタンがフェードアウトする速度
スクリプト内の数字「300」はスクロールする速度

ボタンを表示させたままで構わなければもっと簡単

<script type="text/javascript">
$("#top-link").click(function(){
$('html, body').animate({scrollTop:0},500);
});
</script>

スタイルシートも単純 サンプルではグレイの四角ボタンにしているが、テキスト表示や画像で構わなければもっと簡単

CSS

<style>
#top-link{
position:fixed;
right: 10px;
bottom: 30px;
padding:10px 0px;
width: 100px;
text-align:center;
color:#fff;
cursor:pointer;
cursor:hand;
background-color:#ccc;
}
</style>

ボタンの設置も簡単 Page Topのボタンはbody内のどこに記述しても構わない。

HTML

<div id="top-link">Page Top</div>

 

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク