用jQuery实现了返回顶部按钮😄

实现返回顶部的jQuery代码如下:

jQuery(function(){
	jQuery(window).scroll(function(){
		if(jQuery(window).scrollTop()>200){
			jQuery('.go-to-top').addClass('go-on');
		} else { if(jQuery(window).scrollTop()<200) {
				jQuery('.go-to-top').removeClass('go-on');
			}
		}
	});
	jQuery('#to-top').click(function(){
		jQuery('html, body').animate({scrollTop:0},300);
	});
});

还需要配合在footer.php这里加入一个div

<div id="to-top" class="go-to-top"></div>

因为每个页面都调用footer.php,所以这个div就放这儿了。

css再来配合一下

.go-to-top.go-on {
	position: fixed;
	right: 2em;
	bottom: 2em;
	width: 38px;
	height: 38px;
	text-align: center;
	padding: 0.27em 0;
	background-color: rgba(10,10,10,.08);
	border-radius: 2px;
	cursor: pointer;
}
.go-to-top.go-on:before {
	font-family: dashicons;
	content: "\f342";
	font-size: 1.8rem;
	color: rgba(10,10,10,.65);
}

任务完成。

但是我不知道这样是不是很合理,总之我需要的功能实现了,他已经完美工作了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注