无插件实现WordPress回到顶部功能

前言：现在很多网站都流行使用瀑布流布局，细心的朋友会发现这种网站都有一个回到顶部的功能，对于瀑布流布局的网站来讲，这可以说是非常便捷的一个功能，因为网站下拉了很长之后，需要返回顶部的时候，只需要一点就可以回到顶部，省去了大家拖着滚动条去拉，毕竟文章内容多了，拉滚动条也很麻烦，相信大家都体验过。

下面就以吃饭用大碗的程序猿网站为例，给大家分享一个不用插件就可以实现的回到顶部功能。

首先把这段代码添加到网站的 footer.php 文件中。

<a href="#" class="cd-top"></a>

然后是JavaScript代码

jQuery(document).ready(function($) {
	var offset = 100,
        offset_opacity = 1200,
        scroll_top_duration = 700,
        $back_to_top = $('.cd-top');
        $(window).scroll(function(){
            ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
            if( $(this).scrollTop() > offset_opacity ) { 
                $back_to_top.addClass('cd-fade-out');
            }
        });
        //smooth scroll to top
        $back_to_top.on('click', function(event){
            event.preventDefault();
            $('body,html').animate({
                scrollTop: 0 ,
                }, scroll_top_duration
            );
        });
 });

再把CSS代码添加到style.css样式表文件里面

.cd-top {
    position: fixed;
    right: 1%;
    bottom: -999px;
    z-index: 99999;
    width: 50px;
    height: 60px;
    background: url(https://s1.ax1x.com/2020/06/08/tflxvq.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
    opacity: 0;
}
.cd-top.cd-is-visible {
    opacity: .7;
    bottom: 8%;
}
.cd-top.cd-fade-out {
    opacity: .85;
}
.cd-top:hover {
    opacity: 1;
}
@media screen and (max-width: 860px) {
    .cd-top {
        height: 40px;
        width: 50px;
    }
}

大家可以自由的把图片更换成自己喜欢的样子，我的这个图片是丑了点，可是功能在的呀，哈哈哈哈。测试了一下，效果还是不错的，前端最注重的就是细节，细节做好了，用户的体验感自然就会好，如果吃饭用大碗的程序猿这个站点哪里优化不好的话，欢迎大家留言，我会一一回复，并且改进。如果对你有帮助的话也可以给我留言呀~
原文链接：无插件实现WordPress回到顶部功能