第一种:
$(function(){ var tophtml = "<div class=\"list-returnUp\"></div>"; $('#returnTop').html(tophtml); var lastRmenuStatus=false; $(window).scroll(function(){//bug var _top = $(window).scrollTop(); if(_top > 200){ $('#returnTop').data('expanded',true); }else{ $('#returnTop').data('expanded',false); } if($('#returnTop').data('expanded') != lastRmenuStatus){ lastRmenuStatus=$('#returnTop').data('expanded'); if(lastRmenuStatus){ $('#returnTop .list-returnUp').slideDown(); }else{ $('#returnTop .list-returnUp').slideUp(); } } }); $('#returnTop').find('.list-returnUp').click(function(){ $('html, body').animate({ 'scroll-top': 0 }, 'fast'); }); });
<div id="returnTop"></div>
.returnTop{ display: none; } .list-returnUp{ width: 72px; height: 73px; margin-bottom: 1px; cursor: pointer; position: fixed; right: 5%; bottom: 5%; z-index: 999; background: url(../images/r_top.png) 0px 0px no-repeat; background-color: rgba(102,102,102, 0.6); display: inline-block; } .list-returnUp:hover{ background-color: #4398ED; }
第二种:
$(function(){ var tophtml = "<div class=\"list-returnUp\" style=\"display:none\"></div>"; $(tophtml).appendTo('body'); var lastRmenuStatus=false; $(window).scroll(function(){//bug var _top = $(window).scrollTop(); if(_top > 200){ $('body').data('expanded',true); }else{ $('body').data('expanded',false); } if($('body').data('expanded') != lastRmenuStatus){ lastRmenuStatus=$('body').data('expanded'); if(lastRmenuStatus){ $('body .list-returnUp').slideDown(); }else{ $('body .list-returnUp').slideUp(); } } }); $('.list-returnUp').click(function(){ $('html, body').animate({ 'scroll-top': 0 }, 'fast'); }); });
.list-returnUp{ width: 72px; height: 73px; margin-bottom: 1px; cursor: pointer; position: fixed; right: 5%; bottom: 5%; z-index: 999; background: url(../images/r_top.png) 0px 0px no-repeat; background-color: rgba(102,102,102, 0.6); display: inline-block; } .list-returnUp:hover{ background-color: #4398ED; }