网页常用动态效果--回到顶部
关键将提示回到顶部的盒子固定定位在页面右下角,隐藏状态,当滚动坐标值大于了首屏高度后显示
html代码:
<body> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <span></span> </body>
CSS代码:
<style> span{ width:50px; height:50px; background: lightgoldenrodyellow; position: fixed; bottom:0; right:0; display:none; } </style>
JQ代码:
$(function(){ //获取首屏高度 var height1 = $(window).height(); //滚动事件 $(window).scroll(function(event) { //获取当前滚动位置 var height2 = $(window).scrollTop(); // 判断 if(height2>height1){ $('span').fadeIn(500); }else{ $('span').fadeOut(500); } }); $('span').click(function(){ $('html,body').animate({ scrollTop:0 },500); }) })