添加页内跳转

页内跳转，在我这里，其实就是锚跳转（包括回到顶部、直达底部、阅读评论这三个），只是做了些美化和 JS 效果而已，最终效果见页面右侧（单页和非单页有所不同）。

一开始，我是直接把 HTML/PHP 代码放进 footer.php 文件中的，后来采用 hook 的方法。虽说，就得到的 HTML 结构来说，可能不是非常好；但个人感觉比直接修改 footer.php 好。

HTML/PHP 代码

<?php
    // add updown access, needs hook wp_footer() in footer.php
    function up_down() {
?>
    <div id="updown">
        <a href="#" title="返回顶部" id="goUp"></a>
        <?php if(is_single()):?>
        <a href="#comments" title="阅读评论" id="goComments"></a>
        <?php endif;?>
        <a href="#footer" title="直达底部" id="goDown"></a>
    </div>
<?php
    }
    add_action('wp_footer', 'up_down');
?>

使用这种方法，需要 footer.php 文件中有调用到 wp_footer() 函数，否则是无法 hook 的。

CSS 代码

#updown {
    width:40px;
    position:fixed;
    top:53%;
    right:10%;
    background:transparent;
}
#updown a{
    display:block;
    margin:5px;
    outline:none;
}
#goUp{
    border: 15px solid;
    border-color:transparent transparent #2C2C2C;
    width:0;
    height:0;
}
#goComments{
    border:15px solid #2C2C2C;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
#goDown{
    border:15px solid;
    border-color:#2C2C2C transparent transparent;
    width:0;
    height:0;
}

jQuery 代码

$('#goUp').click(function(){
    $('html,body').animate({scrollTop: '0px'}, 1500);
    return false;
});

$('#goComments').click(function(){
    $('html,body').animate({scrollTop: $('#comments').offset().top}, 1000);
    return false;
});

$('#goDown').click(function(){
    $('html,body').animate({scrollTop: $('#footer').offset().top}, 1300);
    return false;
});

修正

在Opera中，使用以上代码向上滚动时会发生严重的抖动问题，修正如下：将 $(‘html,body’) 改为 $body，而 $body 的定义如下：

$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');