使用按键滚动页面不使用jQuery？

Question

我尝试执行某些步骤，以便我的页面通过按键进入特定的。

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <ul id="page-navigate" class="nav">
            <li><a href="#A" data-link="A" class="current">A</a>

            </li>
            <li><a href="#B" data-link="B">B</a>

            </li>
            <li><a href="#C" data-link="C">C</a>

            </li>
            <li><a href="#D" data-link="D">D</a>

            </li>
        </ul>
        </div>
    </div>
</div>
<section id="A"></section>
<section id="B"></section>
<section id="C"></section>
<section id="D"></section>

所以，我尝试使用 jQuery 上下按键，这样我就可以直接到达特定部分。 jsfiddle 中提到了代码：http://jsfiddle.net/coolshivster/qGjA4/2/ 我的 jQuery 代码是：

            $(document).keyup(function (event) {
            console.log("keyup is working");
            var direction = null;
            if (event.keyCode == 40) {
                direction = 'next';
            } else if (event.keyCode == 38) {
                direction = 'prev';
                console.log('previous click');
            }
            if (direction != null) {
                console.log("wake up keys");
                $('ul#page-navigate a.current').parent()[direction]().find('a').click();
                var link = $('ul#page-navigate a.current').attr('data-link');
                console.log('link is', link);
                $('#' + link + '').slideDown("slow");
            }
        });
        $('ul#page-navigate').on('click','a', function () {
            $(this).parents('ul#page-navigate').find('li').each(function () {
                $(this).find('a').removeClass('current');
            });
            $(this).addClass('current');
        });

现在， 我尝试使用不同的东西，例如使用部分 id 使用滑动直接进入链接。 我尝试使用 click() 函数单击导航栏锚点。 但是，一切都失败了，或者可能是我的代码中的一些错误。

提前谢谢..!!!

Answer 1

您错误地使用了slideDown 函数。它用于通过将元素的高度从 0px 动画到其正常高度来显示元素。这与滚动无关。

你会想要做类似this 的事情来完成你想做的事情。请记住，动画部分是可选的。

这是一个简单的非动画版本：

$('html,body').scrollTop($('#' + link).offset().top)