本篇教程介绍了HTML+CSS入门 如何实现返回顶部，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

页面右下角返回顶部
html


<div class="sriLink">
    <div class="back_top" onclick="window.scrollTo(0,0);return false" style="display: none;">
        <a href="javascript:void(0);"></a>
    </div>
    <div class="go_aboutUs">
        <a href="/aboutus" target="_blank">关于<br>我们</a>
    </div>
    <div class="go_feedBack">
        <a href="javascript:void(0);" target="_blank">意见<br>反馈</a>
    </div>
</div>
css

.sriLink{
    position: fixed;
    right: 50%;
    margin-right: -665px;
    bottom: 90px;
    z-index: 100;
}
.sriLink a{
    display: block;
    width: 50px;
    height: 50px;
    background: #eceded;
    text-align: center;
    padding-top: 8px;
    color: white;
    border-radius: 3px;
    margin-top: 5px;
    line-height: 16px;
}
.sriLink .back_top a {
    background: #e4e4e4 url(../image/back_top.png) no-repeat center;
}
js

/*滚动事件*/
window.addEventListener('scroll',function(e){
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    if(t > 400 ){
        $('.back_top').show();
    }else{
        $('.back_top').hide();
    }
})
/*全局页面中间内容高度*/
$().ready(function(){
    var Height = $(window).height();
    var h = (Height - 212)+'px' //头部和底部总高为212
   $('.sriContainer').css('min-height',h);
})


   

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！