开发小技巧：超简单的“回到顶端”按钮实现

日期：2013-3-26 来源：GBin1.com





在线演示

之前的文章中我们曾发表过另外一个back to top的插件 ：jQuery Back to Top，喜欢的朋友可以点击来看。





今天我们介绍的这篇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 极客社区

来源：开发小技巧：超简单的“回到顶端”按钮实现