スクロールで出現する「PAGE TOP」のサンプル

-
カテゴリー:
javascript 

最近よく見かけるスクロールすることでサイト内出現する「PAGE TOP」の記述方法のご紹介です。

まずはじめにjqueryをダウンロードし、html内にリンクさせます。

次にjavascriptの記述です。

 

 

var m = 50;の部分の数字を変更することで、どれだけスクロールされたら出現させるのかを指定できます。
#pagetopは出現対象となるIDの指定を行っています。

 

次はCSSの記述です。

 display: none;で初期の状態では非表示になります。
表示位置はbottomやrightで指定。 ※topやleftでの表示も可

最後にhtmlの記述です。

 サンプルということで、「PAGE  TOPへ」と記述していますが、テキスト変更や画像への変更も可能です。

 

 
サンプルはこちら