スクロールすると表示→最上部にスクロールするリンクボタン [jQuery] [js]

html

<span class="btop">ページの上へ戻る</span>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

• ここではspanタグを使っていますが、うっかりjs（jquery）が効かなかった時のために、aタグにしてhref属性の値を#にしておくと安心かもしれません（class/id名は任意）。
• ここでspanタグを使っているのは、aタグに対してほかのコードやプラグインなどをあてている場合、何らかの影響があることを想定してのことです。
• 上へ戻るボタンの設置場所（htmlの記述場所）はページの最下部が妥当かと思われます。うっかりjs（jquery）が効かなかった時、ページの一番下に上へ戻るボタンがあれば、コンテンツの邪魔をしないし、上へ戻るという機能も果たせます（ただし、aタグを用いている場合）。
• ページの最下部が妥当とはいっても、企業のwebページなどでは複数のプラグインや広告タグなどを挿入している関係上、上へ戻るボタンの設置場所（htmlの記述場所）をbodyタグの終了タグ直前にするというわけにはいかないと思うので、フッターの直前とか適宜状況に合った場所を選択してください。

css

.btop{
    display: block;
    position: fixed;
    bottom:10px; /* iphoneなどの場合は70pxぐらいにしたほうが良いかも？ */
    right:10px;
    cursor: pointer;
    
    /* 以降、装飾的な設定 */
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 1行目：上へ戻るボタンのclass（またはid）名は任意。jqueryでセレクターとして使用するので、ページ内のほかの要素とかぶらないように。
2. 3行目：つねにブラウザの特定位置に表示させたいので、positionはfixedに。
3. 4行目：場合によっては、bottomの位置を70pxぐらい上にする。
   iphoneなどは画面の下あたりをタップするとデフォルトのメニューが表示されるため、タップに反応するエリアが上へ戻るボタンとかぶってしまい、期待する動作ができないことがあるから。
4. 6行目：上へ戻るボタンとしてaタグ以外を使用した場合は、PCのためにクリックできるとわかりやすいよう、マウスカーソルの形状をpointerにする。
5. 必要であればz-indexなども指定し、適宜装飾などの設定をする。

このサンプルではブラウザの右下に上へ戻るボタンを固定しましたが、位置はこれに限りません。
一般に（特に日本では）右利きの人が多いことや、「ページの上へ戻る」という動作上、下のほうにあったほうが直感的にわかりやすいだろうという予測のもと、右下を採用しましたが、肝心のコンテンツを邪魔しないことやターゲットユーザーの特性なども考慮して、ほかに適正な位置があるのであれば、その位置に配置しても良いでしょう。
PCではユーザーがブラウザのサイズを極端に変える可能性があること、スマートデバイスでは画面サイズが小さくまちまちな上に、OSやブラウザの組み合わせによってデフォルトのメニューなどが表示されることも考慮するとよいと思います。場合によっては、ターゲットユーザーがよく利用するほかのサイトで同じような機能を利用している場合は、それらで採用している位置の傾向に合わせると、ユーザーは違和感なく利用してくれるかもしれません。
また、サイト全体ではデザインや位置を統一た方が良いでしょう。

js

$(function() {
    var topBtn = $('.btop');
    topBtn.hide();
    
    //スクロールが100に達したらボタン表示    
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });

    topBtn.click(function(){
        $('body, html').animate({scrollTop:0}, 'fast');
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 2行目：ページの上へ戻るボタンのセレクターを変数[topBtn]に格納
2. 3行目：上へ戻るボタンを一旦非表示にする。
3. 6～12行目：ウィンドウのスクロール動作を検地したときの処理。
4. 7～8行目：ウィンドウが100pxより多くスクロールしたら上へ戻るボタンをフェードインさせる。数値は適宜変更。
5. 9～10行目：7行目の条件以外であれば、上へ戻るボタンをフェードアウトさせる。
6. 14～16行目：上へ戻るボタンをクリックしたときの処理。スクロール位置を0（ページの一番上）へアニメーションさせる。

• 上へ戻るボタンをクリックしたときのanimateは動作期間をfastにしていますが、これをslowにしたり数値（ms）を指定することで、動きのスピードをかえられます。さらに、easingをしていすると、動きに変化をつけられます。jQuery Easing Plugin（サイト内リンク）やjquery.easie.js（サイト内リンク）といったプラグインと組み合わせると、面白い動きになるかもしれません。
• fadeIn/fadeOutをつかうと、IE7/8では動作しなかったり、きれいに表示されなかったりするので、下のコードのようにIE判定してfadeIn/fadeOutを使わないようにすることもできます。まぁいまさらIE7/8とか、サポートしているwebサイトも少ないかもしれませんが。

$(function() {
    var topBtn = $('.btop');
    topBtn.hide();
    
    //スクロールが100に達したらボタン表示    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            if($.browser.msie){
                topBtn.show();
            }else{
                topBtn.fadeIn();
            }
        } else {
            if($.browser.msie){
                topBtn.hide();
            }else{
                topBtn.fadeOut();
            }
        }
    });

    topBtn.click(function(){
        $('body, html').animate({scrollTop:0}, 'fast');
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

• とはいえ、このようなざっくりした判定だと、fadeIn/fadeOutに対応しているIE9以降（Edgeは含まれません）でもfadeIn/fadeOutしなくなってしまうので、気になる場合はもう少しきちんとしたブラウザ判定（サイト内リンク）をするか、Modernizr（サイト内リンク）などを利用してください。