jquery - 使用 ScrollTo 来回滚动

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