您的位置:首页 > Web前端 > JQuery

回到顶部按钮

2017-11-22 17:23 239 查看
这个回到顶部按钮大家到处都可以看到,今天终于自己做了一个,分享给大家

css样式

<style type="text/css">
#go_top {
display: none;
position: fixed;
width: 40px;
bottom: 25px;
padding: 10px 8px;
color: #666;
background: #ECECEC;
cursor: pointer;
font: 24px/12px Helvetica,Arial,Verdana,sans-serif;
opacity: 0.7;
outline: 0 none;
text-align: center;
text-decoration: none;
text-shadow: 0 0 1px #DDD;
vertical-align: baseline;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
</style>


jquery代码

<script>
$(document).ready(function(){
$(function () {
//检测屏幕高度
var height=$('.row-fluid').offset().top;
//scroll() 方法为滚动事件
$(window).scroll(function(){
if ($(window).scrollTop()>height){
$('#go_top').show();
}else{
$('#go_top').hide();
}
});
$("#go_top").click(function(){
$('body,html').animate({scrollTop:0},100);
return false;
});
});
});
</script>


html部分

<div id="go_top" style="right:20px;
a9f7
">
<p>▲</p>
</div>


效果图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css jquery html