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和wich页面中保存页数。

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

我总结一下，检查按键是否被按下（实际上它已经完成，但你明白了），然后模拟好页面上的点击。

记住，这是您需要工作的原型。我已经可以告诉你一个bug，当你在页面中滚动时，它不会改变current var，但我相信你可以找到一种方法来实现它;）

带箭头的光滑滚动

1 个答案: