223
文章
5
说说
65
评论
113830
访问

个人博客网站:prettywordpress.com(吃饭用大碗的程序猿)

最新评论
qq_avatar
1月前,”ヘル”在《码农=新生代农民工》
说:打卡@[huaixiao]
qq_avatar
2月前,”肋巴骨”在《Win10系统桌面一直闪屏自动刷新怎么办》
说:不错啊,这是谁写的教程,真棒
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:大佬不考虑加个灯箱吗,图片不能放大
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:pjax失效咋办,F12显示已取消
qq_avatar
3月前,”热爱”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:测试Markdown语法加表情 OωO@(暗地观察)@[哈哈]@[ganga]
A+

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

标签: 最后编辑:2020年6月10日

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

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

首先把这段代码添加到网站的 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;
    }
}

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

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表一下你的评论呗

回复评论代表你同意网站的 隐私政策

... 友情提示 请保留版权标识
复制成功!
目录