今更ながらスムーススクロールのプラグイン「Scroll to Top Control」

今更ながらスムーススクロールのプラグイン「Scroll to Top Control」

jquery-plugin
せっかくjQueryを使っているので、プラグインのほうも紹介しようと思います!!
今回は、このブログにも使っているスムーススクロールの「Scroll to Top Control」をご紹介します。
このブログにも設置していますので、画面右下に矢印がでていると思います。それです!

目次

Scroll to Top Controlって?

下に移動すると設定した箇所にボタンがフェードで現れるスムーススクロールのプラグインです。
これを使うことによって、長いページなどでページトップへのアンカーを何箇所も設置する必要がなくなり、デザインを考えるときに幅が広がるのではないでしょうか。

スムーススクロールって?

アンカーを設置した箇所までスルスル~っとスクロールする、最近色んなサイトでよく設置されているアレです!!
これを使うことによってアンカーの位置まで視覚的にわかりやすくなりますね。あとは個人的にスルスル~っと動くのを見て気持ちいいですねww

実際に設置して動作を確認しよう!

jQueryを使うのは当然として、今回はプラグインなので、配布先からダウンロードしてこないといけないですね。ダウンロードするファイルは「scrolltopcontrol.js」と表示する画像です。
img_scroll
なので、用意するファイルは

  • ・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:ブラウザの下からの距離
※数字が小さいほど、右、下に表示されます。

ざっとこんなとこですかね。あまりいじらなくてもいい感じに動いてくれますのでありがたいです。

今後も便利なプラグインがありましたら、紹介していこうと思います!!今回はこのくらいで。ではっ!