2015年2月19日javascriptツイートシェアはてブ送るPocketブログとか縦に長いサイトだとよくスクロールしていくとフワッと「ページトップへ」というボタンが現れたりします。自作してしまったほうが、楽だったりするのでそれをメモ。3:クリックでトップへ戻る何がしたいのかとりあえずは、ページをスクロールしていったら画面の右下にふわっとボタンが表示されてボタンをクリックするとトップにスクロールのアニメーションをやってみたいと思います。この手のネタはごろごろしてるので、コード自体は同じだったりしますが、下記がサンプルです画面の右下に表示させるhtmlhtml側でとりあえずフッターあたりでも構わないですが、記述します。TOPへ戻るCSS画面の右下に表示させるために絶対配置にして、装飾は角丸のグレーにでもしておきます。color:#665e53;}jQueryによるスクロールとりあえずjQueryのコードを全部載せます。});});1:ボタンを最初は隠しおくボタンオブジェクトを取得してhideメソッドで非表示にしておく。2:スクロールイベントで表示・非表示させるscrollイベントでウィンドウのスクロール値が400以上にスクロールされた場合にfadeInメソッドで表示させ、それ以外(400以内)になったらfadeOutメソッドで非表示にする。3:クリックでトップへ戻るボタンをクリックしたらanimateメソッドでscrollTopプロパティを0にすることでトップへアニメーションしながら戻る。javascriptjqueryjqueryツイートシェアはてブ送るPocketコメントを残すコメントを投稿するにはログインしてください。コメントデータの処理方法の詳細はこちらをご覧ください。人気の投稿とページ【PHP】phpによるcsvの複数行の削除方法が知りたい。【JavaScript】子ウィンドウ/親ウィンドウのお互いの要素を操作するには!?【MySQL】SQLで(NOT)INは、遅いらしいので(NOT)EXISTSを使うべき!?【CSS】画像をスマホ対応!!ウィンドウに合わせて自動で拡大・縮小させるには?!最近の投稿matchMediaでメディアクエリのブレイクポイントで条件分岐してみよう!画面外に配置した要素が横スクロールで表示されてしまう。Reserved.Posting....。