Question

网站位于http://cocktail.juggernautwebsites.com/，我正在页脚中工作。我正在尝试在点击“联系人”泡泡时滚动页脚中的#pane div。

我设法得到了我想要向左滚动的内容，但是我不能让它向右滚动（也就是原始位置）。如果我输入

$('#pane').scrollTo( 0 , 600,{axis:'x'});

在Chrome控制台中，我可以让它滑动......这是我的代码：

$(document).ready(function(){
$('.contact-scroll').click(function(){
    $('#pane').scrollTo( 720 , 600  );
    $('.contact-scroll').addClass('scrolled');
    $('.contact-scroll').removeClass('contact-scroll');     
    return false;       
});

$('.scrolled').click(function(){
    $('#pane').scrollTo( 0 , 600,{axis:'x'});   
    $('.scrolled').addClass('contact-scroll');
    $('.scrolled').removeClass('scrolled');     
    return false;               
});

}）;

我最初没有复杂的addClass和removeClass，这是我最初使用的，它也没有用：

$(document).ready(function(){
$('.contact-scroll').click(function(){
    $('#pane').scrollTo( 720 , 600  );
    $('.contact-scroll').addClass('scrolled');
    return false;       
});

$('.scrolled').click(function(){
    $('#pane').scrollTo( 0 , 600  );
}); 
});

Answer 1

问题是点击事件未正确触发。

$('.contact-scroll').live('click', function(){

和

$('.scrolled').live('click', function(){

应该解决问题。

但是，您可能需要考虑单击一下事件并检查滚动状态：

$('#pane').click( function() {
    if ($(this).hasClass('scrolled')) {
      $(this).scrollTo( 0 , 600,{axis:'x'});
    } else {
      $(this).scrollTo( 720 , 600,{axis:'x'});
    }
    $(this).toggleClass('scrolled');
});

使用ScrollTo来回滚动

1 个答案: