html一键返回顶部,HTML+CSS入门 如何实现返回顶部

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

<

页面右下角返回顶部

html

关于
我们

意见
反馈

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知识！