KUBOGENKUBOGENデザインプログラミングマーケティングWordPressプログラミングスムーススクロールで先頭(ページトップ)に戻るボタンの実装方法【jQuery】Webサイトには、ページ下部にトップに戻るボタンなどがよく設置されていて、ボタンをクリックするとページ上部までスムーススクロールしながら戻るようになっています。そのようなトップに戻るボタンの実装方法を紹介します。CodePen.jQueryのanimate関数を使う上の例では、jQueryのanimate関数を使って、スムーススクロールのトップに戻るボタンを実装しています。HTML<p>スクロールしてください。<br/>下の方にトップに戻るボタンがあります。class=”top-return”>トップに戻る▲</a>まず、トップに戻るボタンのaタグにクラスを付けます。今回の場合だと「top-return」というクラス名。次にjQueryですが、さっき付けたクラス名「top-return」の要素がクリックされたら、animate関数の処理がされるようにします。false;});});animate関数の処理内容は上記の通り。「body,html」に対してブラウザのスクロール位置を取得する「scrollTopメソッド」で0の値を指定してやることで、ページ最上部までスクロールしながら戻るような動きが実装できます。そのあとに指定している「1000」という値はスクロールする時間です。単位はms(ミリ秒)なので、1秒かけてスクロールしながら戻るという意味です。速くスクロールさせるなら500とか300を指定するといいと思います。*Website次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。KUBOGENサイトマップ。