點選返回頂部

 

<div class="back_top">
    <img src="../img/top.png" alt="返回頂部">
</div>

.back_top{
    position: fixed;
    right:0.5rem;
    bottom:1rem;
    z-index: 9999;
    display: none;
    background-color:white;
    font-size: 0;
    border-radius: 0.1rem;
}
 

<script>
    $(function () {
        // 獲取要大於的高度
        var headheight = $('.header').height();
        window.onscroll=function () {
            //獲取瀏覽器滾軸滾動的距離
            var scrollTop = $(window).scrollTop();
            //當瀏覽器滾軸滾動的距離 大於 設定的高度時 顯示“點選返回頂部”按鈕，否則隱藏
            if(scrollTop > headheight) {
                $('.back_top').show()
            } else {
                $('.back_top').hide()
            }
        };
       //點選返回頂部500ms的滑動效果
        $('.back_top').on('click',function () {
            $('html,body').animate({scrollTop:0},500);
        })
    })
</script>