Animated Scroll to Top （滚动回顶部）

来源：互联网发布：php 微信app支付demo 编辑：程序博客网时间：2024/06/15 18:42

越来越懒了=w=

demo:demo

<div id="pagewrap"><h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">Animated Scroll to Top</a></h2>..........................<p id="back-top"><a href="#top"><span></span>Back to Top</a></p>

</div>

用一个div包裹内容，里面主要内容是那个p id="back-top"的，作为滚动回顶部的按钮

#pagewrap{margin:0 auto;width:600px;padding-left:150px;position:relative;}#back-top{position:fixed;bottom:30px;margin-left:-150px;}#back-top a{width:108px;display:block;text-align:center;font:11px/100% Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;color:#bbb;-webkit-transition:1s;-moz-transition:1s;transition:1s;}#back-top a:hover{color:#000;}#back-top span{width:108px;height:108px;display:block;margin-bottom:7px;background:#ddd url(up-arrow.png) no-repeat center center;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-transition:1s;-moz-transition:1s;transition:1s;}#back-top a:hover span{background-color:#777;}

里面有些transition来设置动作的缓和让效果看起来更加好

back-top div固定在底部

$(document).ready(function(){$('#back-top').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$('#back-top').fadeIn();}else$('#back-top').fadeOut();});$('#back-top').click(function(){$('body,html').animate({scrollTop:0},800);return false;})});});

JS部分也很简单，主要用jquery

先把#back-top隐藏起来

下面我们监控在窗口滚动的时候scroll 当scrollTop的值大于100px的时候把按钮渐进显示，小于的时候淡出

而点击按钮的时候，设定动画animate({属性,时间})神马的慢慢回滚到顶部最后return false去掉链接的默认事件和冒泡啊捕获神马的

大功告成，轻松自如如鱼得水水到渠成诚心诚意意大利面。

0 0