|
在线演示
之前的文章中我们曾发表过另外一个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 极客社区
来源：开发小技巧：超简单的“回到顶端”按钮实现 （编辑：佛山站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
