scroll返回顶部效果
第一方式：
使用Javascript Scroll函数返回顶部
scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：
方式1：
<a href="javascript:scroll(0,0)">返回顶部</a>
也可以
onclick="window.scrollTo('0','0')"
scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。
方式2：
本方式是渐进式返回顶部，要好看一些，代码如下：
function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
< a href="pageScroll();">返回顶部</a>
这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。
if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);
第二种方式：
HTML代码为：
<div id="RightFlNav" class="crollTop" style="top:62%"> <ul> <li><a href="javascript:;" class="FlCart"></a></li> <li><a href="javascript:;" class="FlService"></a></li> <li><a href="javascript:;" class="FlToTop ToTop"></a></li> </ul> </div>
CSS代码为：
/* moobasa右侧悬浮导航 */ #RightFlNav{width:71px;height:auto;border:1px solid #d3d3d3;position:fixed;top:44%;right:0;display:none;z-index:100;} #RightFlNav li a{display:block;} #RightFlNav li a.FlToTop{height:52px;background:url(../images/r3.jpg) no-repeat;} #RightFlNav li.on a.FlToTop{background:url(../images/r3_1.jpg) no-repeat;} #RightFlNav li a.FlCart{height:77px;border-bottom:1px solid #d3d3d3;background:url(../images/r1.jpg) no-repeat;} #RightFlNav li.on a.FlCart{background:url(../images/r1_1.jpg) no-repeat;} #RightFlNav li a.FlService{height:78px;border-bottom:1px solid #d3d3d3;background:url(../images/r2.jpg) no-repeat;} #RightFlNav li.on a.FlService{background:url(../images/r2_1.jpg) no-repeat;}
JS代码为：
$(function(){ var RightFlNav = $("#RightFlNav"); var bodyW = $(window).width(); var RightFlNavW = $("#RightFlNav").outerWidth(); RightFlNav.css({"right":(bodyW-1180)/2-RightFlNavW-20}); RightFlNav.find("li").each(function(){ $(this).hover(function(){ $(this).addClass("on"); },function(){ $(this).removeClass("on"); }); }); $(".ToTop").click(function(){ $('body,html').animate({scrollTop:0},500); }); //悬浮右侧导航 $(window).scroll(function(){ var ScrollCon = $(".crollTop"); var ScrollTop = $(window).scrollTop(); if( ScrollTop>=100 ){ ScrollCon.show(); }else{ ScrollCon.hide(); }; }) });
本地效果查看：http://svn.chenhua.cc/desk/shunfax/detail.html
第三方式：
第一步：scrollTop=0时为"返回顶部"图标按钮隐藏：
第二步：scrollTop >=20时，按钮动画缓慢从bottom=10上升为bottom=30动画效果：
<div class="to-top"><i class="fa fa-angle-up"></i></div>
其中css代码为：
.to-top {width: 35px;height: 35px;position: absolute;bottom: 10px;z-index: 3;border-radius: 50%;color: #fff;opacity: 0;cursor: pointer;left: 272px;text-align: center;transition: all .3s ease-out;}
.to-top:hover {-webkit-animation:btn-pudding 1s linear;-moz-animation:btn-pudding 1s linear;animation:btn-pudding 1s linear;transition: all .3s ease-out;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;}
@-webkit-keyframes btn-pudding{0%{-webkit-transform:scale(1.2,0.8)}1%{-webkit-transform:scale(1.18,0.82)}2%{-webkit-transform:scale(1.16,0.84)}3%{-webkit-transform:scale(1.13,0.87)}4%{-webkit-transform:scale(1.1,0.9)}5%{-webkit-transform:scale(1.07,0.93)}6%{-webkit-transform:scale(1.04,0.96)}7%{-webkit-transform:scale(1.01,0.99)}8%{-webkit-transform:scale(0.99,1.01)}9%{-webkit-transform:scale(0.97,1.03)}10%{-webkit-transform:scale(0.95,1.05)}11%{-webkit-transform:scale(0.94,1.06)}12%{-webkit-transform:scale(0.93,1.07)}13%{-webkit-transform:scale(0.93,1.07)}14%{-webkit-transform:scale(0.93,1.07)}15%{-webkit-transform:scale(0.93,1.07)}16%{-webkit-transform:scale(0.94,1.06)}17%{-webkit-transform:scale(0.94,1.06)}18%{-webkit-transform:scale(0.95,1.05)}19%{-webkit-transform:scale(0.96,1.04)}20%{-webkit-transform:scale(0.98,1.02)}21%{-webkit-transform:scale(0.99,1.01)}22%{-webkit-transform:scale(1,1)}23%{-webkit-transform:scale(1,1)}24%{-webkit-transform:scale(1.01,0.99)}25%{-webkit-transform:scale(1.02,0.98)}26%{-webkit-transform:scale(1.02,0.98)}27%{-webkit-transform:scale(1.02,0.98)}28%{-webkit-transform:scale(1.03,0.97)}29%{-webkit-transform:scale(1.03,0.97)}30%{-webkit-transform:scale(1.02,0.98)}31%{-webkit-transform:scale(1.02,0.98)}32%{-webkit-transform:scale(1.02,0.98)}33%{-webkit-transform:scale(1.02,0.98)}34%{-webkit-transform:scale(1.01,0.99)}35%{-webkit-transform:scale(1.01,0.99)}36%{-webkit-transform:scale(1.01,0.99)}37%{-webkit-transform:scale(1,1)}38%{-webkit-transform:scale(1,1)}39%{-webkit-transform:scale(1,1)}40%{-webkit-transform:scale(0.99,1.01)}41%{-webkit-transform:scale(0.99,1.01)}42%{-webkit-transform:scale(0.99,1.01)}43%{-webkit-transform:scale(0.99,1.01)}44%{-webkit-transform:scale(0.99,1.01)}45%{-webkit-transform:scale(0.99,1.01)}46%{-webkit-transform:scale(0.99,1.01)}47%{-webkit-transform:scale(0.99,1.01)}48%{-webkit-transform:scale(0.99,1.01)}49%{-webkit-transform:scale(1,1)}}@-moz-keyframes preload3{0%{-webkit-transform:translateY(80px);opacity:0}100%{-webkit-transform:translateY(0px);opacity:1}}
@keyframes btn-pudding{0%{transform:scale(1.2,0.8)}1%{transform:scale(1.18,0.82)}2%{transform:scale(1.16,0.84)}3%{transform:scale(1.13,0.87)}4%{transform:scale(1.1,0.9)}5%{transform:scale(1.07,0.93)}6%{transform:scale(1.04,0.96)}7%{transform:scale(1.01,0.99)}8%{transform:scale(0.99,1.01)}9%{transform:scale(0.97,1.03)}10%{transform:scale(0.95,1.05)}11%{transform:scale(0.94,1.06)}12%{transform:scale(0.93,1.07)}13%{transform:scale(0.93,1.07)}14%{transform:scale(0.93,1.07)}15%{transform:scale(0.93,1.07)}16%{transform:scale(0.94,1.06)}17%{transform:scale(0.94,1.06)}18%{transform:scale(0.95,1.05)}19%{transform:scale(0.96,1.04)}20%{transform:scale(0.98,1.02)}21%{transform:scale(0.99,1.01)}22%{transform:scale(1,1)}23%{transform:scale(1,1)}24%{transform:scale(1.01,0.99)}25%{transform:scale(1.02,0.98)}26%{transform:scale(1.02,0.98)}27%{transform:scale(1.02,0.98)}28%{transform:scale(1.03,0.97)}29%{transform:scale(1.03,0.97)}30%{transform:scale(1.02,0.98)}31%{transform:scale(1.02,0.98)}32%{transform:scale(1.02,0.98)}33%{transform:scale(1.02,0.98)}34%{transform:scale(1.01,0.99)}35%{transform:scale(1.01,0.99)}36%{transform:scale(1.01,0.99)}37%{transform:scale(1,1)}38%{transform:scale(1,1)}39%{transform:scale(1,1)}40%{transform:scale(0.99,1.01)}41%{transform:scale(0.99,1.01)}42%{transform:scale(0.99,1.01)}43%{transform:scale(0.99,1.01)}44%{transform:scale(0.99,1.01)}45%{transform:scale(0.99,1.01)}46%{transform:scale(0.99,1.01)}47%{transform:scale(0.99,1.01)}48%{transform:scale(0.99,1.01)}49%{transform:scale(1,1)}}
@-moz-keyframes btn-pudding{0%{-moz-transform:scale(1.2,0.8)}1%{-moz-transform:scale(1.18,0.82)}2%{-moz-transform:scale(1.16,0.84)}3%{-moz-transform:scale(1.13,0.87)}4%{-moz-transform:scale(1.1,0.9)}5%{-moz-transform:scale(1.07,0.93)}6%{-moz-transform:scale(1.04,0.96)}7%{-moz-transform:scale(1.01,0.99)}8%{-moz-transform:scale(0.99,1.01)}9%{-moz-transform:scale(0.97,1.03)}10%{-moz-transform:scale(0.95,1.05)}11%{-moz-transform:scale(0.94,1.06)}12%{-moz-transform:scale(0.93,1.07)}13%{-moz-transform:scale(0.93,1.07)}14%{-moz-transform:scale(0.93,1.07)}15%{-moz-transform:scale(0.93,1.07)}16%{-moz-transform:scale(0.94,1.06)}17%{-moz-transform:scale(0.94,1.06)}18%{-moz-transform:scale(0.95,1.05)}19%{-moz-transform:scale(0.96,1.04)}20%{-moz-transform:scale(0.98,1.02)}21%{-moz-transform:scale(0.99,1.01)}22%{-moz-transform:scale(1,1)}23%{-moz-transform:scale(1,1)}24%{-moz-transform:scale(1.01,0.99)}25%{-moz-transform:scale(1.02,0.98)}26%{-moz-transform:scale(1.02,0.98)}27%{-moz-transform:scale(1.02,0.98)}28%{-moz-transform:scale(1.03,0.97)}29%{-moz-transform:scale(1.03,0.97)}30%{-moz-transform:scale(1.02,0.98)}31%{-moz-transform:scale(1.02,0.98)}32%{-moz-transform:scale(1.02,0.98)}33%{-moz-transform:scale(1.02,0.98)}34%{-moz-transform:scale(1.01,0.99)}35%{-moz-transform:scale(1.01,0.99)}36%{-moz-transform:scale(1.01,0.99)}37%{-moz-transform:scale(1,1)}38%{-moz-transform:scale(1,1)}39%{-moz-transform:scale(1,1)}40%{-moz-transform:scale(0.99,1.01)}41%{-moz-transform:scale(0.99,1.01)}42%{-moz-transform:scale(0.99,1.01)}43%{-moz-transform:scale(0.99,1.01)}44%{-moz-transform:scale(0.99,1.01)}45%{-moz-transform:scale(0.99,1.01)}46%{-moz-transform:scale(0.99,1.01)}47%{-moz-transform:scale(0.99,1.01)}48%{-moz-transform:scale(0.99,1.01)}49%{-moz-transform:scale(1,1)}}
.to-top i {font-size: 24px;line-height: 35px;position: relative;z-index: 2;} .topbtnshow {bottom: 30px !important;opacity: 1 !important;} .topbtnhide {bottom: 10px !important;opacity: 0 !important;cursor: default;} .topbtnfadein {animation: topbtnfadein .5s ease-out;-webkit-animation: topbtnfadein .5s ease-out;-moz-animation: topbtnfadein .5s ease-out;} .topbtnfadeout {animation: topbtnfadeout .5s ease-out;-webkit-animation: topbtnfadeout .5s ease-out;-moz-animation: topbtnfadeout .5s ease-out;} @keyframes topbtnfadeout {from {bottom: 30px;opacity: 1;}to {bottom: 10px;opacity: 0;}} @-webkit-keyframes topbtnfadeout {from {bottom: 30px;opacity: 1;}to {bottom: 10px;opacity: 0;}} @-moz-keyframes topbtnfadeout {from {bottom: 30px;opacity: 1;}to {bottom: 10px;opacity: 0;display: none;}} @keyframes topbtnfadein {from {bottom: 10px;opacity: 0;}to {bottom: 30px;opacity: 1;}} @-webkit-keyframes topbtnfadein {from {bottom: 10px;opacity: 0;}to {bottom: 30px;opacity: 1;}} @-moz-keyframes topbtnfadein {from {bottom: 10px;opacity: 0;}to {bottom: 30px;opacity: 1;}}
JS代码为：
效果页面：http://localhost/response/seejs_index.html
原文还可以查看：http://www.cnblogs.com/chenguiya/archive/2013/04/18/3029758.html
浙公网安备 33010602011771号