JS 回顶部示例

来源:互联网 发布:淘宝网招聘兼职 编辑:程序博客网 时间:2024/05/03 15:18



CSS部分:

<!--css,js--><style type="text/css">*{margin:0;padding:0;}.box{width:60px;height:50px;position:fixed;bottom:50px;right:5px;display:none;}.box span{width:60px;height:50px;display:block;background:#666;color:#fff;text-align:center;line-height:50px;cursor:pointer;}.box span:hover{background:#ccc;color:#000;}</style>

HTML部分:

<div class="box"><span>TOP</span></div>

JS部分:

<script type="text/javascript"> //监控滚动条事件$(window).scroll(function(){var h =$(window).scrollTop();if(h >= 50){$(".box").fadeIn('slow');}else{$(".box").stop(true,true).fadeOut('slow');}});//点击执行回项部$(".box").click(function(){$("html,body").animate({"scrollTop":0},300);});</script>


0 0
原创粉丝点击