読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」

読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」サンプル よくページの下の方まで行くと「トップに戻る」がすっと表示されることがあるかと思います。
scrollUp jQuery pluginを利用するとすっと導入ができます。
すっと出てくるので、目につきやすいのが特徴ですね。

使用方法 scrollUp jQuery pluginからファイル一式をダウンロード。
あとは下記を記述するだけですっとできちゃいます。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.scrollUp.js"></script>
<script type="text/javascript">
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // 表示される要素のID
topDistance: '100', // トップからどんくらいったら表示するか (px)
topSpeed: 300, // トップに戻る速度 (ms)
animation: 'fade', // アニメーションFade, slide, none
animationInSpeed: 200, // 表示のアニメーションスピード (ms)
animationOutSpeed: 200, // 消えるアニメーションスピード (ms)
scrollText: 'Scroll to top', // テキスト
});
});
</script>

なお、上記で設定した要素のIDをCSSにて調整することで見た目を変えられます。
#scrollUp {
bottom: 20px;
right: 20px;
padding: 10px 20px;
background: #555;
color: #fff;
}

読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」サンプル

sponsors

「読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」」をシェアする

記事作成:
記事URL:

TOP > > > 読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」