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

浅浅的花香味﹌ 2022-03-20 17:12 175阅读 0赞

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

[![开发小技巧：超简单的“回到顶端”按钮实现][title.jpg]][title.jpg 1]

[在线演示][Link 1]

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

[![开发小技巧：超简单的“回到顶端”按钮实现][1.jpg]][title.jpg 1]

今天我们介绍的这篇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][javascript_ - fixiejs]，代码如下：

是不是很简单，大家可以在gbdebug里自己调试一下。

> 在线调试：[http://www.gbtags.com/gb/debug/559ff347-6c95-442f-8b3a-2ef794e699cd.htm][http_www.gbtags.com_gb_debug_559ff347-6c95-442f-8b3a-2ef794e699cd.htm]
> 
> via [ 极客社区][Link 2]

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

[GBin1.com]: http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/
[title.jpg]: http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/title.jpg
[title.jpg 1]: http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/index.html
[Link 1]: http://www.gbtags.com/gb/demoviewer/605/674a1b4e-e9e3-4304-98c8-f6b7b00d5e82/index.html.htm
[jQuery Back to Top]: http://www.gbin1.com/technology/jquerynews/20111117jquerypluginbacktotop/
[1.jpg]: http://www.gbin1.com/technology/jquery/20130326-quick-tips-jquery-back-to-top/1.jpg
[jQuery]: http://www.gbin1.com/bloghome.html?tag=jquery
[javascript_ - fixiejs]: http://www.gbin1.com/technology/javascript/20120802-fixie-add-html-content/
[http_www.gbtags.com_gb_debug_559ff347-6c95-442f-8b3a-2ef794e699cd.htm]: http://www.gbtags.com/gb/debug/559ff347-6c95-442f-8b3a-2ef794e699cd.htm
[Link 2]: http://www.gbtags.com/gb/share/605.htm