2013年2月15日

[jQuery]スクロールするとページのトップに戻るボタンが出現するjQueryプラグイン – Scroll to Top Control

このサイトでも使用している、ページをスクロールして下へ移動すると、
右下にスーッと出現するボタンの実装方法です。
そのボタンをクリックするとページのトップまでスクロールしながら移動します。

■必要ファイル

scrolltopcontrol.jsを開くと、12行目あたりに画像を指定しているパスが書いてあるので、
そちらを使用する画像のパスに変更します。

html

controlHTML: '<img src="up.png" style="width:48px; height:48px" />

<head>内で下記のようにjQuery本体とscrolltopcontrol.jsを読み込みます。

html

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>

これで完成ですが、scrolltopcontrol.jsの11行目あたりから、
動作を変更するオプションもついています。

JavaScript

setting: {
startline:100, //ボタンが表示されるスクロールのタイミング
scrollto: 0, //0でトップへ戻る。id指定でその場所へスクロール
scrollduration:1000, //スクロールのスピード
fadeduration:[500, 100] //フェードイン,アウトの時間
},

controlattrs: {
offsetx:5, offsety:5 //ボタンの位置指定
},

58行目あたりにポジションを変更させる記述があります。
right:mainobj.controlattrs.offsetx を right:’50%’にすることで、センターに配置できたりします。

JavaScript

.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})

あまりないと思いますが、サイト全体を包む「div」タグなどに「z-index」の指定などが入ると、scrolltopcontrol.jsがうまく動作しないことがあります。
その場合は「z-index」をなくすか、画像の方に「z-index」を指定すると正しく動作すると思います。