首页 / WordPress函数讲解 / WordPress增加返回顶部效果的方法介绍

WordPress增加返回顶部效果的方法介绍

    • 珂李斯

    发布于

    by

    返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordP…

    返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordPress中增加反回顶部效果的方法.

    第一步:在下面主题文件footer.php底下加上这段代码:

    <script src=”top.js” type=”text/javascript” charset=”utf-8″></script >
    <div id=”scroll”><a href=”javascript：void(0)” onclick=”goto_top()” title=”返回顶部”>TOP</a></div>

    top.js代码如下:

    //<![CDATA[
    var goto_top_type = -1;
    var goto_top_itv = 0;
    function goto_top_timer()
    {
    var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
    var moveby = 15;
    y -= Math.ceil(y * moveby / 100);
    if (y < 0) {
    y = 0;
    }
    if (goto_top_type == 1) {
    document.documentElement.scrollTop = y;
    }
    else {
    document.body.scrollTop = y;
    }
    if (y == 0) {
    clearInterval(goto_top_itv);
    goto_top_itv = 0;
    }
    }
    function goto_top()
    {
    if (goto_top_itv == 0) {
    if (document.documentElement && document.documentElement.scrollTop) {
    goto_top_type = 1;
    }
    else if (document.body && document.body.scrollTop) {
    goto_top_type = 2;
    }
    else {
    goto_top_type = 0;
    }
    if (goto_top_type > 0) {
    goto_top_itv = setInterval(‘goto_top_timer()’, 50);
    }
    }
    }
    //]]>

    第二步:在主题文件style.css文件中加入以下样式:

    /*返回顶部*/
    #scroll {display:block; width:30px; margin-right:-380px;
    position:fixed;
    right:50%;
    top:90%;
    _margin-right:-507px;
    _position:absolute;
    _margin-top:30px;
    _top:expression(eval(document.documentElement.scrollTop));
    }
    #scroll a {
    display:block;
    float:right;
    padding:9px 5px;
    cursor: pointer;
    background-color:#444;
    color:#fff;
    border-radius:5px;
    text-decoration: none;
    font-weight:bold;
    }
    #scroll a:hover {
    background-color:#333;
    color:#669900;
    text-decoration: none;
    font-weight:bold;
    }

    这样我们再清除缓存是不是就可以看到有个返回顶部的效果按钮了,这样你的WordPress博客中的所有页面都会有返回顶部效果了.

    希望本文所述对大家的WordPress建站有所帮助。

    WordPress增加返回顶部效果的方法介绍 (https://www.wpmee.com/) WordPress使用教程 第1张

    类别：WordPress函数讲解、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！