添加页内跳转

为博客添加回到顶部、直达底部、阅读评论这三个快速页内跳转

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

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

HTML/PHP 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#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 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#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 的定义如下:

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

《添加页内跳转》有7个想法

        1. 对配色感觉好的话,可以变换颜色来适应啊,我这里就是将其一些颜色设为透明的

评论已关闭。