回到顶部按钮在很多页面中都会用到，具体实现效果如下：
当页面滚动到一定位置时，页面右下侧出现固定按钮： 当鼠标移到按钮上方时，有一定的动画效果：
<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; }); });