Webサイトのページ右下にアイコンを追加して、それをクリックするとページの一番上までスクロールするボタンを付けたい時があります。自分のサイトには余りつけないのですが要望があったときにサクッと付けられるようにコピペ用のスクリプトを記事にしました。

動作条件

jQuery と fontAwesome4.7 必須です。

<!-- HEADタグ内 -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

既に読み込んでいる場合には不要です。

動作デモ

[codepen_embed height=”800″ theme_id=”0″ slug_hash=”GBVJmr” default_tab=”js,result” user=”xnonce”]See the Pen <a href=’https://codepen.io/xnonce/pen/GBVJmr/’>一番上までスムーズにスクロールするスクリプト</a> by xnonce (<a href=’https://codepen.io/xnonce’>@xnonce</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

使い方

• CSSタブの「.scroll-to-top{～}」をサイトのCSSに追加
• JSタブの内容をコピーして「sroll-to-top.js」等の名前を付けて保存。
• 上記jQueryを読み込んだscriptタグよりも後に、「sroll-to-top.js」を読み込み。