jQueryでページトップへスクロール

jQueryを使ったシンプルなページトップリンクのサンプルです。

当然のことですがjQueryが必須になりますので、以下からダウンロードするか、CDNを読み込むなりしてください。

HTML

<div>コンテンツエリア</div>
<p class="pagetop"><a href="#">↑ページトップ</a></p>

CSS

※スクロールを確認するためだけのスタイルです。
グラデーションは以下のサイトを利用させていただきました。

Ultimate CSS Gradient Generator

div {
  height: 2000px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjExJSIgc3RvcC1jb2xvcj0iI2ZmOGMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI2JSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM5JSIgc3RvcC1jb2xvcj0iIzY5ZmMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU0JSIgc3RvcC1jb2xvcj0iIzAwZmNiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iIzAwNTVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iIzcyMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwYmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #ff1a00 0%, #ff8c00 11%, #ffff00 26%, #69fc00 39%, #00fcbd 54%, #0055ff 69%, #7200ff 83%, #ff00bb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff1a00), color-stop(11%,#ff8c00), color-stop(26%,#ffff00), color-stop(39%,#69fc00), color-stop(54%,#00fcbd), color-stop(69%,#0055ff), color-stop(83%,#7200ff), color-stop(100%,#ff00bb));
  background: -webkit-linear-gradient(top,  #ff1a00 0%,#ff8c00 11%,#ffff00 26%,#69fc00 39%,#00fcbd 54%,#0055ff 69%,#7200ff 83%,#ff00bb 100%);
  background: -o-linear-gradient(top,  #ff1a00 0%,#ff8c00 11%,#ffff00 26%,#69fc00 39%,#00fcbd 54%,#0055ff 69%,#7200ff 83%,#ff00bb 100%);
  background: -ms-linear-gradient(top,  #ff1a00 0%,#ff8c00 11%,#ffff00 26%,#69fc00 39%,#00fcbd 54%,#0055ff 69%,#7200ff 83%,#ff00bb 100%);
  background: linear-gradient(to bottom,  #ff1a00 0%,#ff8c00 11%,#ffff00 26%,#69fc00 39%,#00fcbd 54%,#0055ff 69%,#7200ff 83%,#ff00bb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1a00', endColorstr='#ff00bb',GradientType=0 );
  color: #fff;
}

JavaScript

jQuery.easing.quart = function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
$(function(){
  $(".pagetop a").click(function(){
    $('html,body').animate({ scrollTop:0 }, {duration:1000/*（Msec）*/, easing:'quart'});
    return false;
  });
});

［duration:1000］の部分がスクロールスピードです。ミリ秒単位で変更できるようになっています。