开发小技巧:超简单的“回到顶端”按钮实现
2013-03-26 13:13
232 查看
日期:2013-3-26 来源:GBin1.com
![](http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/title.jpg)
在线演示
之前的文章中我们曾发表过另外一个back to top的插件 :jQuery Back to Top,喜欢的朋友可以点击来看。
![](http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/1.jpg)
今天我们介绍的这篇web开发小技巧将使用jQuery实现一个超简单的滚动到页面顶端的功能,代码如下:
基本上不用太多解释,大家应该理解代码功能。
首先使用window对象的scroll回调函数来控制当页面向下滚动超过150px的时候,显示back to top按钮,否则隐藏。
其次,当点击“回到顶端”的时候,调用animate方法来滚动页面到顶端。
另外,注意back-to-top的CSS属性应该设置如下:
特别提出需要设置position:fixed,这样按钮会跟随页面滚动。
最后,我们这里使用了fixie来生成页面的“placeholder"内容,你引用相关Javascript并且添加class定义即可生成站位内容。如果你不了解如何使用,请查看着篇文章帮助你针对不同标签自动填入内容的轻量级javascript类库 - fixiejs,代码如下:
是不是很简单,大家可以在gbdebug里自己调试一下。
在线调试:http://www.gbtags.com/gb/debug/559ff347-6c95-442f-8b3a-2ef794e699cd.htm
via
极客社区
来源:开发小技巧:超简单的“回到顶端”按钮实现
![](http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/title.jpg)
在线演示
之前的文章中我们曾发表过另外一个back to top的插件 :jQuery Back to Top,喜欢的朋友可以点击来看。
![](http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/1.jpg)
今天我们介绍的这篇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
极客社区
来源:开发小技巧:超简单的“回到顶端”按钮实现
相关文章推荐
- 开发小技巧:超简单的“回到顶端”按钮实现
- 开发小技巧:超简单的“回到顶端”按钮实现
- 开发小技巧:超简单的“回到顶端”按钮实现
- 开发小技巧:超简单的“回到顶端”按钮实现
- 开发小技巧:超简单的“回到顶端”按钮实现
- 按钮、实现-开发小技巧:超简单的“回到顶端”按钮实现-by小雨
- 【django】搭建博客教程(4)——超级简单实现滚动回到页面顶端按钮
- [Android开发] 自定义View之重写View非常简单实现开关按钮SwitchView
- iOS开发小技巧--cell往左拖拽出现很多按钮的实现,仅仅适用于iOS8以后
- iOS开发>学无止境 - 新浪微博iOS底部功能按钮简单实现
- android开发 点击按钮弹出对话框的简单实现
- 简单控件开发实现图标按钮
- 简单天气开发系列(三)——侧滑的实现
- iOS开发小技巧--取消按钮的选中状态
- 简单实现后台订单页面 上一单,下一单 的按钮
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnets 显示某个对象的评论列表的功能实现
- 初学者对通讯录软件开发的整体把握与分块实现———点击menu按钮的响应事件
- JQUERY简单按钮轮换选中效果实现方法
- Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
- WCF开发(7) 查询SQLServer数据库(简单实现)