WordPress增加返回顶部按钮

返回顶部按钮对于网站开发很有必要，可以帮助读者很快返回到网站的顶部，一个非常棒的返回顶部按钮将大大的提高用户体验，平滑滚动按钮实现网站平滑滚动到网站顶部，这里提供一个WordPress网站添加平滑滚动到顶部的按钮的教程，效果可以看本站右下角的返回顶部按钮。

第一步

将下面的css代码添加到网站更目录下的style.css中；

#top:hover {
	color: #fff !important;
	background-color: #ed702b;
	text-decoration: none;
}

#top {
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: 3.2rem;
	height: 3.2rem;
	line-height: 3.2rem;
	font-size: 1.4rem;
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	border-radius: 3.2rem;
	text-align: center;
	cursor: pointer;
}

第二步

在网站顶部引入jQuary文件,在footer.php中添加如下代码，也可以单独添加到网站的js文件中；

<script>
	jQuery(document).ready(function() {
		var offset = 220;
		var duration = 500;
		jQuery(window).scroll(function() {
			if (jQuery(this).scrollTop() > offset) {
				jQuery('.crunchify-top').fadeIn(duration);
			} else {
				jQuery('.crunchify-top').fadeOut(duration);
			}
		});

		jQuery('.crunchify-top').click(function(event) {
			event.preventDefault();
			jQuery('html, body').animate({scrollTop: 0}, duration);
			return false;
		})
	});
</script>

第三步

在网站根目录下的footer.php中添加如下代码；

<a id="top" href="#top" class="btn btn-default"><span class="glyphicon glyphicon-chevron-up" ></span></a>

OK！到此我们的返回顶部按钮添加成功了，你可以通过调整css来定义自己喜欢的样式，具体效果按本站右下角返回顶部按钮。（viacrunchify.com）