Question

css3中怎么做返回顶部

Answer 1

重点是go-top的CSS定义：
div.go-top { display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;}div.go-top:hover { opacity: 1;
filter: alpha(opacity=100);}div.go-top div.arrow { position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;}div.go-top div.stick { position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;}

使用fixed定位，让按钮始终出现在右下角，通过设定left:90%可以使按钮在右方出现，但又不会太紧贴滚动条。
按钮默认不可见，当滚动页面到一定高度后，按钮出现，这里用jQuery实现
$(function() { $(window).scroll(function() { if ($(window).scrollTop() > 1000) $('div.go-top').show(); else
$('div.go-top').hide();
}); $('div.go-top').click(function() { $('html, body').animate({scrollTop: 0}, 1000);
});
});
当按下按钮时，有动画效果返回顶部