ホームページの作成や運用ノウハウについて、プロのクリエイターが情報を無料公開！

ホームページTIPS
facebook twitter mail

このサイトはコーディング初心者〜中級者向けの情報サイトです。掲載コードの転用制限はありませんが、
動作保証は行なっておりません。ご意見については、フォームからお知らせください。

javascriptに関するTips

更新日：2017.10.26

javascript

ページのトップ [ 最上段 ] へ戻るスクロールボタン

解　説

javascript とcssを使ってページ内スクロールボタンの作り方をご紹介します。ここでは使用頻度が高いと思われる「ページのトップ [ 最上段 ]へ戻るボタン」を作ります。ある程度スクロールした時点で、戻るボタンを画面右下にフェード表示させる場合を想定しています。

demo
1まずはhtmlとcssでボタンを配置します
 /* 全ページ共通で使用したい場合には「footerテンプレート」などに組み込んでも良いでしょう*/



   　TOPへ戻る
 



/* cssはこんな感じで画面右下に固定配置します */

#for_top {
    position: fixed;
    bottom: 0px;
    right: 40px;
    z-index: 10;
}
2javascriptでスクロールの動きを実装します。

jQueryの「smoothscroll.js」なども有名ですが、このくらいのjsならば、head内に書いてしまっても良いと思います。縦に長くなりがちなスマートフォンレイアウトにも効果的なスクリプトです。とにかくお手軽に使い回したいですね。

3もっと単純なケース「指定位置までスクロールさせるボタン」をつくる場合

押すと指定位置までスクロールするボタンです。とっても簡単ですね。

facebookシェアボタン twitterシェアボタン メールシェアボタン

Site link

トップへ