長めのページを制作した際に、ページ下あたりにページ内をスクロールボタンをつけて、ページトップまでスクロールさせているサイトがよくあると思います。
今回はその方法を記載していきます。
まず、htmlのソースに記述します。

表示位置などは、CSSで調整するのが良いと思います。
Javascriptで位置を調整する方法もありますが、Javascriptでエラーがあった場合など、予期せぬところに表示されたりする場合や、レスポンシブ対応させたい場合など、細かい調整がCSSの方がしやすいためです。

三角などの簡単な形で表示するサイトもありますが、その場合は、画像ではなく、擬似要素などを用いて表現する方が、サイトを少しでも軽くさせるためには、良いかとも思いますが、その辺は、お好みで。といった感じですね。

最後に、Javascriptの記述になります。

この記述では、主に3つの処理をしています。
まず、hide(); で、ページを表示した際、ページトップのボタンを見えないようにしています。
次の$(window).scroll(); では、ウィンドウをスクロールしたら、ページトップのボタンを表示し、トップに戻ったら表示を消すという内容になります。
ここでは、スクロール量の基準を『100』としているので、少しのスクロールで、表示しますが、もっと大きい数字を指定したり、任意の要素の位置を取得して、その位置を基準とする方法もあります。
パッっと消えると違和感が出てしまうので、fadeIn / fadeOutでやんわりとした動作するようにしています。
最後の、$(“.scroll”).click(); にで、ページトップへのボタンをクリックしたら、トップまで戻るように動くという指定になります。
<a>タグでは、href=”#container”として、スクロール先の<div>要素を指定していますが、#の指定を変更することで、ページ内の任意の場所へのスクロールも可能です。
また、$(“.scroll”).click(); と記述している部分を $(‘a[href^=#]’).click（）; としても良いのですが、jQueryの他のプラグインなどで、a[href^=#]に対して、処理させている場合など、他と競合して動作しない場合もあるため、クラスを指定するようにしています。

---

余談

今回の方法は、ウィンドウに対してのスクロールになるので、ページ内スクロールでヘッダーなどを固定をしているページだと、ヘッダーと重なってしまうため、位置がズレてしまいます。
そのため、$(this).attr(“href”)).offset().topの部分にヘッダー分の高さを引いてあげる必要があり、固定値にするか、ヘッダーの高さを取得して、引く方法などがあります。
PCとスマホでヘッダーの高さがあまり変わらないサイトは、固定値でも問題ないかと思いますが、差が大きい場合は、ページを開いた時に高さを取得して、引くという方法が良いかと思います。