回到頂部按鈕在很多頁面中都會用到，具體實現效果如下：

當頁面滾動到一定位置時，頁面右下側出現固定按鈕：

當滑鼠移到按鈕上方時，有一定的動畫效果：

<div class="t-right-bar">
	<div class="t-bar-support" data-open-online-form><a href="index.php?a=support&c=html">技術支援</a></div>
	<div class="t-bar-rocket" id="back-to-top">返回頂部</
 
div>
</div>

.t-right-bar {
    position: fixed;
    right: 0;
    bottom: 10%;
    width: 48px;
    height: 48px;
    z-index: 1000;
    cursor: pointer;
}

.t-right-bar > div {
    float: left;
    height: 36px;
    margin-bottom: 1px;
    border-radius: 20px 0 0 20px;
    color: #fff;
    padding-left
 
: 100%;
    clear: both;
    white-space: nowrap;
    font-size: 13px;
    line-height: 36px;
    font-style: normal;
    background-color: #aaa;
    background-repeat: no-repeat;
    background-position: 12px center;
    transition: transform .2s cubic-bezier(.215, .61, .355, 1), padding .2s cubic-bezier
 
(.215, .61, .355, 1), margin .2s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.215, .61, .355, 1)
}

 .t-right-bar > div.active, .t-right-bar > div:hover {
    transform: translateX(-100%);
    padding-left: 45px;
    padding-right: 10px;
    margin-left: 48px;
    background-color: #23a0e1;
    text-decoration: none;
    color: #fff
}

.t-right-bar .t-bar-support {
    background-image: url(../img/icon/support_1.svg);   //按鈕圖示
    background-position: 14px center;
}

.t-right-bar .t-bar-rocket {
    background-image: url(../img/icon/rocket_1.svg);  //按鈕圖示
    background-position: 19px center;
}

.t-bar-support a{
    color: white;
}

.t-bar-support a:hover{
    color: #fff
}

    $(".t-right-bar").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $(".t-right-bar").fadeIn(500);
            }
            else {
                $(".t-right-bar").fadeOut(500);
            }
        });

        $("#back-to-top").click(function () {
            $('body,html').animate({scrollTop: 0}, 100);
            return false;
        });
    });