带箭头的平滑滚动

Question

现在我使用一些 jquery 和缓动属性平滑滚动锚点。我希望能够使用箭头键滚动到每个部分。我怎样才能做到这一点？

HTML

<ul class="desktop">
     <li><a href="#aboutus">ABOUT US </a></li>
     <li><a href="#branding">BRANDING &amp; IDENTITY</a></li>
     <li><a href="#sponsorship">CAUSE MARKETING</a></li>
     <li><a href="#promotion">EVENT MANAGEMENT</a></li>
</ul>   

<div class="main-container" id="aboutus"></div>
<div class="main-container2" id="branding"></div>
<div class="main-container3" id="sponsorship"></div>
<div class="main-container4" id="promotion"></div>

JAVASCRIPT

<script src="js/jquery.easing.1.3.js"></script>
<script>
$(function() {
$('a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');
    /*
    if you don't want to use the easing effects:
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1000);
    */
    event.preventDefault();
});
});
</script>

Answer 1

看看这个小提琴：http://jsfiddle.net/T53fa/26/

这是一个原型，还有很多改进要做，但逻辑在这里。

我将页数保存在 var 中以及您所在的页面。

var lengthDiv = $('.desktop').find('li').length;
var current = 0;

然后我在点击功能中添加了 1 行：

current = $anchor.parent().index();

这将改变当前页码。

我在 keydown 上做了一个函数 preventDefault() 只是为了防止在动画之前有一点滚动，然后我插入了这个函数：

$(document).keydown(function(e){e.preventDefault()})
$(document).keyup(function(e){
    var key = e.keyCode;
    if(key == 38 && current > 0){
        $('.desktop').children('li').eq(current - 1).children('a').trigger('click')
    }else if(key == 40 && current < lengthDiv){
        $('.desktop').children('li').eq(current + 1).children('a').trigger('click')
    }
})

我总结一下，它检查按下了哪个键（实际上它是向上的，但你明白），然后模拟对好页面的点击。

记住，这是您需要工作的原型。我可以告诉你一个错误，当你在页面中滚动时，它不会改变current var，但我相信你能找到一种方法来做到这一点；）