0

现在，我使用一些 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>
4

1 回答 1

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')
    }
})

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

请记住，这是您需要工作的原型。我已经可以告诉您一个错误，当您在页面中滚动时，它不会更改currentvar，但我相信您可以找到一种方法；）

于 2013-05-21T18:36:04.840 回答