jQuery超简单实现的“回到顶部”按钮

今天我们介绍的这篇web开发小技巧将使用jQuery实现一个超简单的滚动到页面顶端的功能，代码如下：

JavaScript代码:

$(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属性应该设置如下：

CSS代码:

.back-to-top {
	position: fixed;
	bottom: 3em;
	right: 3em;
	text-decoration: none;
	color: https://csswang.com/EEEEEE;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	padding: 1em;
	display: none;
	border-radius: 3px;
	border: 1px solid https://csswang.com/CCCCCC;
}

本文链接：» https://www.csswang.com/exp/4115

转载请注明本文来源出处。