JQuery实现精美的滑动顶部,底部效果
目前很多商城页面比较长,都加上了返回顶部效果,这样能有一个很好的用户体验,废话不多说,进入主题
我这个效果,是根据网上几个top效果整合而成
贴出代码
JS代码 jQuery(document).ready(function($){ jQuery(‘#roll_top’).click(function(){$(‘html,body’).animate({scrollTop: ’0px’}, 800);}); jQuery(‘#roll_bottom’).click(function(){$(‘html,body’).animate({scrollTop:$(‘.footer’).offset().top}, 800);}); });
div代码 <div class="go"> <a id=”roll_top” title=”返回顶部” ></a> <a title=”如果您有意见,请反馈给我们!” ></a> <a id=”roll_bottom” title=”返回底部” ></a> </div>
css代码 .go{width:47px;height:106px;background-color:#FFF;position:fixed;_position:absoluteright:12px;bottom:25%;
border-radius:5px;box-shadow:0 0 2px #6E6E6E} .go a{background:url(images/top.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;
border:0;overflow:hidden;float:left} .go .top{background-position:4px 0;height:20px} .go .feedback{background-position:4px -20px;height:32px;} .go .bottom{background-position:4px -52px;height:22px;} .go .top:hover{background-position:-34px 0;} .go .feedback:hover{background-position:-34px -20px;} .go .bottom:hover{background-position:-34px -52px;}
相关图片文件下载:
http://www.sweiku.com/jquery-wordpress-top-bottom-comments-effect.html#title-3