今更ながらスムーススクロールのプラグイン「Scroll to Top Control」
- 2014.02.12
- jQueryプラグイン
- jQuery, プラグイン
せっかくjQueryを使っているので、プラグインのほうも紹介しようと思います！！
今回は、このブログにも使っているスムーススクロールの「Scroll to Top Control」をご紹介します。
このブログにも設置していますので、画面右下に矢印がでていると思います。それです！
Scroll to Top Controlって？
これを使うことによって、長いページなどでページトップへのアンカーを何箇所も設置する必要がなくなり、デザインを考えるときに幅が広がるのではないでしょうか。
スムーススクロールって？
これを使うことによってアンカーの位置まで視覚的にわかりやすくなりますね。あとは個人的にスルスル～っと動くのを見て気持ちいいですねww
実際に設置して動作を確認しよう！
なので、用意するファイルは
- ・jQueryファイル
- ・scrolltopcontrol.js
- ・表示する画像（差し替え可です。）
の3つ必要です。
設定方法は、
HTML
[html]
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="scrolltopcontrol.js"></script>
</head>
[/html]
js
[javascript highlight=”4,5,6″]
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: ‘<img src="up.png" style="width:48px; height:48px" />’, //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: ‘#top’, //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
[/javascript]
jsの中身を少し説明すると、上でみる4行目から。
- startline
- トップからどれだけ下にいったらボタンを表示するかの位置（上から0）
- scrollto
- ボタンを押したときの移動位置（初期値は0なのでトップへ戻るならそのままでOK）
- scrollduration
- スクロール時間（数字が小さいほど速い）
- fadeduration
- ボタンの表示、フェードイン・アウトの時間。1つ目がフェードインの時間。2つ目がフェードアウトの時間です。
- controlHTML
- ボタン画像のパス設定
- offsetx, offsety
- ボタンの表示位置
offsetx：ブラウザの右からの距離
offsety：ブラウザの下からの距離
※数字が小さいほど、右、下に表示されます。
ざっとこんなとこですかね。あまりいじらなくてもいい感じに動いてくれますのでありがたいです。
今後も便利なプラグインがありましたら、紹介していこうと思います！！今回はこのくらいで。ではっ！