Горизонтальное скольжение jQuery скользит вниз вместо

Я хочу, чтобы горизонтальный слайдер скользил по "страницам" на одном представлении (в Wordpress). Мой код почти работает, но вместо того, чтобы сдвинуть блок по горизонтали, он немного сдвигает страницу вниз (при нажатии кнопки "вниз" на клавиатуре).

Вот мой код:

    <style>
    #main
    {
        overflow: hidden;
    }

    #primary 
    {
        position: relative; 
    }

    div.content div 
    {
        position: absolute;
        width:100%;
        top:25px;
        left:0px;
    }
    #box1 { background: yellow; left:0px;}
    #box2 { background: orange; left:100%; }
    #box3 { background: #838EDE; left:200%; }
    #box4 { background: #FFFCC; left:300%; }
    #box5 { background: red; left:400%; }

    #navlinks li 
    {
        float: left;
        display: inline-block;
        background: #F3F3F3;
        border-top: 1px solid #E5E5E4;
        height: 20px;
        width: 15%;
        text-align: center;
        padding: 10px 0px;
        border-bottom: 1px solid #e5e5e4;
        margin: 0px 5px;
    }

    #navlinks > li.current, #navlinks > li:hover
    {
        background: #cc0000;
        border-color: #A00;
    }

    #navlinks > li a 
    {
        color: #303030;
        text-decoration: none; 
    }

    #navlinks > li.current a, #navlinks > li:hover a 
    {
        color: #fff;
    }

    #navlinks > li.tab1, #navlinks > li.tab5
    {
        margin: 0px;
    }

    #navlinks > li:after
    {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 50px 0 50px 50px;
        border-color: transparent transparent transparent #f3f3f3;
        line-height: 0px;
    }
</style>

<div id="primary" class="site-content">
    <ul id="navlinks">
        <li class="tab tab1 current" data-href="#box1"><a>Link 1</a></li>
        <li class="tab tab2" data-href="#box2"><a>Link 2</a></li>
        <li class="tab tab3" data-href="#box3"><a>Link 3</a></li>
        <li class="tab tab4" data-href="#box4"><a>Link 4</a></li>
        <li class="tab tab5" data-href="#box5"><a>Link 5</a></li>
    </ul>

    <div class="content" role="main">
        <div id="box1">Blok 1</div>
        <div id="box2">Blok 2</div>
        <div id="box3">Blok 3</div>
        <div id="box4">Blok 4</div>
        <div id="box5">Blok 5</div>
    </div><!-- #content -->
</div><!-- #primary -->

<script>
var j = jQuery.noConflict();
j(document).ready(function(j) {
    j(document).on('click', '#navlinks li', function() {
        j('.tab').removeClass('current');
        j(this).addClass('current');

        var panel = j(this).data('href');
        j.scrollTo(panel, 1000);
    });
});
</script>

Любые неизвестные классы или идентификатор, которые вы можете увидеть в тегах <style></style> находятся в #main или нижнем колонтитуле (например, #main). Функция scrollTo() - из плагина.

Я попытался создать jsFiddle, но это оказалось еще хуже:/. Кто-нибудь видит что-то неправильно в моем коде? Заранее спасибо.

UPDATE: я создал jsFiddle с моей текущей настройкой: jsfiddle.net/UkP4X