技術標籤：HtmlCSSJS

原生 （較為生硬 不優雅）

<a href="#top">回到頂部</a>   //方法1  href裡面寫#top
<a href="javascript:window.scrollTo(0,0)">返回頂部</a> //方法2

使用 jQuery

一般專案裡會有個圖示之類的好看一點返回箭頭/按鈕
如圖

html

<button type="button" class="back-to-top" id="back-to-top"
 
>

scss

.back-to-top{
    position: fixed;
    bottom: rem(50px);
    right: rem(30px);
    width: rem(40px);
    height: rem(40px);
    border-radius: rem(20px);
    padding: 0;
    background-color: $theme_plink;
    font-size: rem(20px);
    line-height: 1;
    z-index: -5;   //通過z-index隱藏箭頭
    opacity:
 
 0;    //通過透明度隱藏箭頭
    transition: .3s linear;
    &:hover{
        background-color: #ea144c;
    }
}

.back-to-top-show{
    z-index: 10; //通過z-index顯示箭頭
    opacity: 1;//通過透明度顯示箭頭
}

js

對於任何非空 HTML 文件，呼叫 document.documentElement 總是會返回一個 元素，且它一定是該文件的根元素。藉助這個只讀屬性，能方便地獲取到任意文件的根元素。
原來HTML裡是document.body 而XHTML裡是document.documentElement ,都指的是節點

(function () {
//1.獲取返回頂部的按鈕
const $btn = $('#to_top_fix');
//2.按鈕點選之後,呼叫返回的方法backToTop
$btn.on('click', backToTop);
//返回頂部的方法
function backToTop(e) {
    e.stopPropagation();
    //判斷是xhtml還是html
    if (document.documentElement && document.documentElement.scrollTop) {
        $(document.documentElement).animate({ scrollTop: 0 }, 500);
    } else {
        //jq的animate()方法 動畫
        //語法  (selector).animate({styles},speed,easing,callback)
        $(document.body).animate({ scrollTop: 0 }, 500);
    }
}
//3.顯示/隱藏返回頂部的箭頭/按鈕
$(window).scroll(ShowBackToTop);

//監聽視口高度 顯示隱藏按鈕/箭頭
function ShowBackToTop() {
    $(window).scrollTop() >= 600
    ? $btn.addClass('back-to-top-show')
    : $btn.removeClass('back-to-top-show');
}
})();