返回到顶部几乎是一个网站的标配，不过对于一个小型的网站来说，太过复杂花哨的插件反而不实用。
这里推荐一个插件，随着滚动条滚动出现按钮，到了一定的页面深度后，透明度降低，页面滚动效果平滑，简单实用。
动图效果：
插件下载
链接：http://pan.baidu.com/s/1bWnqwA 密码：0qf8
具体使用方法：
1、HTML结构
在body标签结束之前添加返回顶部按钮：
<body> <!-- all your content here --> <a href="#0" class="cd-top">Top</a> <!-- link to scripts here --> </body>
2、CSS样式
返回顶部按钮始终出现在页面的右边。初始化时它是不可见的：visibility:hidden; 和 opacity:0;。这两个属性可以通过2个class来控制：.cd-is-visible 和.cd-fade-out。
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}3、JavaScript代码
在demo中，我们使用三个变量来控制返回顶部按钮：
//browser window scroll (in pixels) after which the "back to top" link is shown var offset = 300, //browser window scroll (in pixels) after which the "back to top" link opacity is reduced offset_opacity = 1200, //duration of the top scrolling animation (in ms) scroll_top_duration = 700;
offset变量用于切换.cd-is-visible类。offset_opacity用于控制.cd-fade-out。
返回顶部的动画使用的是jQuery .animate()方法。
发表评论:
◎请发表你卖萌撒娇或一针见血的评论，严禁小广告。