wordpress 返回顶部功能

首页 Wordpress wordpress 返回顶部功能

wordpress 返回顶部功能

2020年12月31日 08:49 · Wordpress · 阅读 36

给wordpress添加一个简单的返回顶部的功能，代码如下。

HTML部分

<div class="_top">
    TOP
</div>

CSS部分

._top {
	position:fixed;
	right:0;
	bottom:30%;
	line-height:50px;
	text-align:center;
	cursor:pointer;
	width:50px;
	height:50px;
	border:1px solid #CCC;
	display:none;
	background-color:#333;
	color:aliceblue;
}

JS部分

$(function() {
    $(window).scroll(function() {
        var _top = $(window).scrollTop();
        if (_top > 300) {
            $('._top').fadeIn(600);
        } else {
            $('._top').fadeOut(600);
        }
    });
    $("._top").click(function() {
        $("html,body").animate({
            scrollTop: 0
        }, 500);
    });
});

其实不仅是用在wordpress上，可以用在任何网页上。