JavaScript逆引きリファレンスJavaScript/jQuery開発時に、こそっとお使いください。Control」というプラグインを使うと便利です。http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm実行には、jQuery本体も必要なのでjQueryもご用意ください。※CDN版を使うとダウンロードしなくてもよいため便利です。CDNでjQueryを使う2)画像を用意するボタンのアイコン画像を用意します。上記公式ページ内にもサンプルのアイコンがあるのでそれを利用してもいいですし、フリー素材のサイトからダウンロードしてもOKです。画像を用意したらup.pngという名称でhtmlファイルと同じディレクトリに置きます。設定を変えれば別のファイル名にもできます。ここでは取り敢えずup.pngとします。3)コーディングする例として以下のようにコーディングします。この例だと、sample.htmlと同じディレクトリにscrolltopcontrol.jsを配置します。<p>スクロールすると、ToTopアイコンが画面右下に表示されます。style="height:2000px;"><p>スクロールすると、ToTopアイコンが画面右下に表示されます。</p></body></html>4)動作確認するサンプルソースをブラウザで表示し、スクロールさせると右下にアイコンが表示され、クリックするとページトップへアニメーションしながら戻ります。設定scrolltopcontrol.jsファイル内の以下パラメータの値を変えることにより、動きや見た目を変えることができます。画面右下を起点としたy座標位置(デフォルトはoffsety:5)上記パラメータはscrolltopcontrol.jsファイル内にあります。(settingは11行目位、controlHTMLは12行目位、controlattrsは13行目位。上記のパラメータ以外にも設定できる項目があります。コメントをキャンセルメールアドレスが公開されることはありません。ボタンを実装する(Button)jQueryUIを使ったボタンサンプルです。ダイアログを実装する(Dialog)jQueryUIでダイアログを実装するサンプルです。オートコンプリートを実装する(Autocomplete)jQueryUIのオートコンプリートを使ったサンプルです。全選択チェックボックスを非表示にする全選択チェックボックスを非表示にするサンプルです。JavaScript逆引きリファレンスJavaScript/jQuery開発時に、こそっとお使いください。