JQuery实现精美的滑动顶部，底部效果

目前很多商城页面比较长，都加上了返回顶部效果，这样能有一个很好的用户体验，废话不多说，进入主题

我这个效果，是根据网上几个top效果整合而成

演示效果：http://www.sweiku.com

贴出代码

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;}

口明明口

JQuery实现精美的滑动顶部，底部效果

导航

公告