关键将提示回到顶部的盒子固定定位在页面右下角,隐藏状态,当滚动坐标值大于了首屏高度后显示
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); }) })