JQuery実装はトップに戻る

1ページの内容が長い場合、一般的にページの右下隅の固定位置に「トップに戻る」ボタンがあり、クリックするとページのスクロールバーが徐々にトップに戻り、本編ではその実現過程を説明します.まず、ボタンが必要です.

<button id="btn_top" title="    ">
        
button>

次にこの要素を右下に配置し、position:fixedを使用します.次のボタンに最も基本的なスタイルを追加します.

#btn_top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
}

この場合、このボタンは表示されません.ページのスクロールバーの距離が一番上に50ピクセルある場合、「トップに戻る」ボタンを表示し、JQueryで実現する必要があります.

$(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 50) {
            $('#btn_top').fadeIn();
        }
        else {
            $('#btn_top').fadeOut();
        }
    });
});

最後に、「上部に戻る」ボタンにclickイベントを追加し、アニメーションでスクロールバーを一番上にスクロールします.

$('#btn_top').click(function () {
    $('html,body').animate({ scrollTop: 0 }, 500);
});

よし、大成功!