今日の人気記事

  1. レスポンシブなパンくずナビを作成する「rCrumbs」
  2. テーブルをレスポンシブ対応に「rt Responsive Tables」
  3. 同じ内容の入力フォームを追加・削除「Repeater」
  4. 背景画像や色をランダムに変更「RandomBackground」
  5. シングル・マルチセレクトに対応した選択要素「SumoSelect」

「ページトップへ戻る」を実装 - さまざまなオプション付き「GoUp!」 - jQueryプラグイン

スポンサーリンク

「ページトップへ戻る」を実装するプラグイン「GoUp!」を紹介します。

GoUp!

このプラグインを使えば「ページトップへ戻る」ボタンを簡単に実装することができます。

さまざまなオプションが付いているので、お好みの「ページトップへ戻る」ボタンを作成できそうです。おすすめ!

スポンサーリンク

デモページを下にスクロールすると上矢印の画像が表示されるので、クリックしてみてください。ゆっくりとページトップに戻ります。

「GoUp!」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="GoUp!のデモでーす。">
<title>GoUp! - jQueryプラグインまとめ</title>
<body>
<div style="height:2000px">
  <h1>GoUp! のデモでーす。</h1>
  <p>ページを下へ</p>
  <p>スクロール</p>
  <p>してみてください。</p>
  <p>&nbsp;</p>
  <p>下へスクロールすると</p>
  <p>ページトップへ戻る</p>
  <p>ボタンが表示されるので、</p>
  <p>それをクリックしてみてください。</p>
  <p>ページトップへ戻ります。</p>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.goup.js"></script>
<script>
$.goup({
  location: "left",
  locationOffset: 400,
  bottomOffset: 400
});
</script>
</body>
</html>

jsファイルのダウンロード、その他オプションなどの詳細とはこちらからどうぞ。
» GoUp!

スポンサーリンク

関連記事(一部広告含む)