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

博主水平有限,难免出错,请提出您的意见,咨询QQ:825641026

发表评论