ページ最上部にアニメーションで戻るボタンの無料ダウンロード


ページを下に少しスクロールされると「ページ最上部に戻る」が出現し、そのボタンをクリックするとページ最上部にアニメーションで戻るスクリプトを作りました。

今時は多くのサイトに実装されているものですが、サイトを制作する度に毎回同じコードを書いたりコピペするのも面倒なので、少ない手順で簡単に組み込めるようにできています。

名称は「ページトップスクリプト」としておきます。
ページのトップに戻るためのスクリプトだから「ページトップスクリプト」です。

ボタンのデザインはCSSで自由に変更可能です。
HTML上に画像を直接設置したり、CSSで画像置き換えしたり自由にできます。

現在の最新バージョンは2018年10月29日公開の1.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

特長

  • HTMLページにも組み込み可能。
  • 設定用のファイルなし。サーバにアップロードするだけで動きます。
  • ボタンのデザインはすべてCSSで自由に変更可能です。(HTML上に画像を直接設置することも可能)

ページトップスクリプトのサンプルとダウンロード

ページトップスクリプトのサンプル
このサンプルはわざと縦長のページになるように、body要素にheight : 3000px;が設定されております。
以下でダウンロードできる初期状態のプログラムも同様になっています。

ページトップスクリプトのダウンロード
無料でダウンロードできます。

使い方の説明(基本設置方法)

説明
まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、ページトップスクリプトをダウンロードし、展開する。

2、フォルダごとサーバにアップロードする。

3、ブラウザでindex.htmlにアクセスし、動作を確認する。

既存サイトへの組み込み方法

以下の作業は同梱のindex.htmlのソースからコピーしていくと間違いがないでしょう。

4、組み込みたいページ内に以下のコードを貼り付ける。
貼り付ける場所はbody要素内ならどこでも良いですが、ページ最下部あたりが良いのではないでしょうか。

<div id="pagetop-scroll">ページの最上部に戻る</div>

5、pagetop-scroll.cssを読み込ませる。
このpagetop-scroll.cssの設置場所はどこでも構いません。
サーバ上にすでにcssという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。

<link rel="stylesheet" type="text/css" href="css/pagetop-scroll.css" />

6、jQuery本体とpagetop-scroll.jsを読み込ませる。
このpagetop-scroll.jsの設置場所もどこでも構いません。
サーバ上にすでにjsという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/pagetop-scroll.js"></script>

以上となります。

ボタンのデザインを変更する方法


この「ページトップスクリプト」は、CSSをどのように編集したとしても動作エラーの原因にはなりませんので、自由にCSSでデザインしてください。

pagetop-scroll.cssの中にはbody要素やh1要素に対する指定がありますが、これらは既存サイトに組み込む場合は不要だと思いますので削除してOKです。

cssフォルダやjsフォルダについて

上記の「既存サイトへの組み込み方法」にありますように、このスクリプトではcssファイルやjsファイルの場所を移動させても問題ありません。
動作上、最低限必要なファイルはjQuery本体pagetop-scroll.jsだけです。

注意点

注意
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。

不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。

サポートに関して

サポート者
無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。

初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。

しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2018/10/29 バージョン1.0
  • 公開。

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

スレッド式BBS

ダウンロード一覧へ

レスポンシブBBS

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別