wordpress 返回顶部功能

GavinWu 2020年12月31日 Wordpress 170 次阅读

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

HTML部分

1
2
3
<div class="_top">
    TOP
</div>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
._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部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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上,可以用在任何网页上。

发表评论