返回top写法技巧
HTML
<a href="#" class="fixed">top</a>
CSS:
.fixed{ padding: 20px 15px; text-transform: uppercase; position: fixed; left:50%; bottom: 60px; margin-left: 475px; //为总的main容器的宽度/2再加上10px。 background-color: #000; font: normal bold 17px; color: #fff; }
这样做的目的是在不同的分辨率下都能正常。
<script type="text/javascript"> function goTop() { $(window).scroll(function(e) { //若滚动条离顶部大于100元素 if($(window).scrollTop()>100) $("#gotop").fadeIn(1000);//以1秒的间隔渐显id=gotop的元素 else $("#gotop").fadeOut(1000);//以1秒的间隔渐隐id=gotop的元素 }); }; $(function(){ //点击回到顶部的元素 $("#gotop").click(function(e) { //以1秒的间隔返回顶部 $('body,html').animate({scrollTop:0},1000); }); $("#gotop").mouseover(function(e) { $(this).css("background","url(images/backtop2013.png) no-repeat 0px 0px"); }); $("#gotop").mouseout(function(e) { $(this).css("background","url(images/backtop2013.png) no-repeat -70px 0px"); }); goTop();//实现回到顶部元素的渐显与渐隐 }); </script>