Garden仕事や趣味でHPやツールを作った際に詰まった問題の解決策など、なんとなく読んでおけば、将来に役立ちそうな情報を載せてます。基礎知識がない方でも直ぐにローカル環境で試せるように各デモのソース一式は全てダウンロード出来る様にしていますので気軽にご利用いただけます。>全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。ページ最上部へのスクロールボタンの作り方02(ボタンの半透明化:hover時半透明)ページ最上部へのスクロールボタンの作り方01(一番シンプルなスクロール処理)一番シンプルなスクロール処理デモを見るデモを保存する解説スクロール処理ページ最上部への自動スクロールは、下記のJavascript(jQuery)を実行するだけです。);ただ、このコードには、jQueryと呼ばれるJavascriptのライブラリが必要なので<head>~</head>内に下記の様なコード追加が必要です。src="./js/jquery-3.1.1.min.js"></script>※上記コードは、jQueryライブラリのコードファイル(jquery-3.1.1.min.js)を相対アドレス(./js)に配置した例です。下記のように直リンクして、ライブラリを使用することも可能です。src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>ボタン設置スクロール処理を実行するスイッチとしてボタンを設置します。ボタンは何でも良いので、今回はシンプルに下記コードとします。id="goto_page_top">↑</div>デモでは、CSSによりボタンのデザイン・配置を工夫しています。50px;}ボタンとスクロール処理の関連づけボタンを表示させただけでは、ボタンをクリックしても何も起こりません。そこで、下記コードを追加することで、ボタンとスクロール処理の関連付けを行います。まとめ上記ポイントをまとめると、下記のようなコードになります。