CSS トップに戻る コード例

<a href="#top" target="_self">トップに戻る</a>

<a href="javascript:scroll(0,0)">JavaScript でトップに戻る<s/a>

<a onclick="goScrollTop()">JavaScript がゆっくりと上にスライドします</a>

関数 goScrollTop() {
    // 指定されたピクセル数だけコンテンツをスクロールします (最初のパラメータは右にスクロールするピクセル数、2 番目のパラメータは下にスクロールするピクセル数です)
    //上方向は負、下方向は正 window.scrollBy(0, -100);
    // 上方向のスクロール効果をシミュレートするために再帰呼び出しを遅延します scrolldelay = setTimeout('goScrollTop()', 100);
    // scrollTop 値を取得します。DTD を宣言する標準の Web ページの場合は、document.documentElement.scrollTop を取得します。それ以外の場合は、document.body.scrollTop を取得します。2 つのうち 1 つだけが有効になり、もう 1 つは常に 0 になるため、2 つの値の合計を取得すると、Web ページの実際の scrollTop 値を取得できます。var sTop = document.documentElement.scrollTop + document.body.scrollTop;
    // ページが最上部に到達したかどうかを判断し、遅延コードをキャンセルします（そうしないと、ページが最上部までスクロールしたときにページを正常に閲覧できなくなります）
    sTop == 0 の場合、スクロール遅延をクリアします。
}

<div class="goTop">
    <span>進む</span>
</div>

関数 goTop(min_height) {
    $(".goTop").click(
        関数（） {
            $('html,body').animate({
                スクロールトップ: 0
            }, 700);
        });
    //ページの最小の高さを取得します。値が渡されない場合、デフォルトは 600 ピクセルです。min_height=min_height?min_height:400;
    //ウィンドウのスクロールイベントの処理関数をバインドします $(window).scroll(function() {
        //ウィンドウのスクロールバーの垂直位置を取得します。var s = $(window).scrollTop();
        //ウィンドウのスクロールバーの垂直位置がページの最小の高さより大きい場合は、先頭の要素に戻るように徐々に表示し、そうでない場合はフェードアウトします。if (s > min_height) {
            $(".goTop").fadeIn(100);
        } それ以外 {
            $(".goTop").fadeOut(200);
        }
    });
}
 
 
$(関数() {
    先頭へ移動します。
});

.トップへ戻る{
    高さ: 40px;
    幅: 40px;
    背景: 赤;
    境界線の半径: 50px;
    位置: 固定;
    上位: 90%
    右：3%
    表示: なし;
}
 
.goTop スパン {
    色: #fff;
    位置: 絶対;
    上: 12px;
    左: 8px;
}