カスタマイズ豊富なページトップに戻るボタンを設置できるjQueryプラグイン「jQuery GoUp!」

ページが長くなったらページトップというものを設置するサイトが多いですね。
jQueryプラグインのjQuery GoUp!を利用すると、カスタマイズがいろいろできるようになります。
カスタマイズ豊富なページトップに戻るボタンを設置できるjQueryプラグイン「jQuery GoUp!」サンプル

使用方法
jQuery GoUp!からファイル一式をダウンロードします。
あとは下記を記述するとさくっと適用可能です。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='jquery.goup.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$.goup({
trigger: 100, //表示させるスクロール量
location: "left", //表示位置 (left,right)
bottomOffset: 50, //下からの表示位置
goupSpeed: "slow", //戻る速度 (slow,normal,fast)
entryAnimation: "slide", //表示させるアニメーション (slide,fade)
title: 'Page Top', //表示させるテキスト
titleAsText: true //テキストを表示させるかどうか
containerRadius: 30, //戻るボタンの丸み
containerColor: "#330000", //戻るボタンの色味
arrowColor: "#ffffff" //戻るボタン内の矢印の色
});
});
</script>

カスタマイズ豊富なページトップに戻るボタンを設置できるjQueryプラグイン「jQuery GoUp!」サンプル

sponsors

「カスタマイズ豊富なページトップに戻るボタンを設置できるjQueryプラグイン「jQuery GoUp!」」をシェアする

記事作成:
記事URL:

TOP > > > カスタマイズ豊富なページトップに戻るボタンを設置できるjQueryプラグイン「jQuery GoUp!」