开发小技巧:超简单的“回到顶端”按钮实现
日期:2013-3-26 来源:GBin1.com
在线演示
今天我们介绍的这篇web开发小技巧将使用jQuery实现一个超简单的滚动到页面顶端的功能,代码如下:
$(document).ready(function() {// 滚动窗口来判断按钮显示或隐藏$(window).scroll(function() {if ($(this).scrollTop() > 150) {$('.back-to-top').fadeIn(100);} else {$('.back-to-top').fadeOut(100);}});// jQuery实现动画滚动$('.back-to-top').click(function(event) {event.preventDefault();$('html, body').animate({scrollTop: 0}, 500);})});
基本上不用太多解释,大家应该理解代码功能。
首先使用window对象的scroll回调函数来控制当页面向下滚动超过150px的时候,显示back to top按钮,否则隐藏。
其次,当点击“回到顶端”的时候,调用animate方法来滚动页面到顶端。
另外,注意back-to-top的CSS属性应该设置如下:
.back-to-top {position: fixed;bottom: 3em;right: 3em;text-decoration: none;color: #EEEEEE;background-color: rgba(0, 0, 0, 0.3);font-size: 12px;padding: 1em;display: none;border-radius: 3px;border: 1px solid #CCCCCC;}
特别提出需要设置position:fixed,这样按钮会跟随页面滚动。
最后,我们这里使用了fixie来生成页面的“placeholder"内容,你引用相关Javascript并且添加class定义即可生成站位内容。如果你不了解如何使用,请查看着篇文章帮助你针对不同标签自动填入内容的轻量级javascript类库 - fixiejs,代码如下:
<section><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p><p class="fixie"></p></section>
是不是很简单,大家可以在gbdebug里自己调试一下。
在线调试:http://www.gbtags.com/gb/debug/559ff347-6c95-442f-8b3a-2ef794e699cd.htm
via 极客社区
来源:开发小技巧:超简单的“回到顶端”按钮实现