使用 ScrollTo 来回滚动答案

【问题标题】：scrolling back and forth with ScrollTo使用 ScrollTo 来回滚动
【发布时间】：2011-12-01 23:40:28
【问题描述】：

站点位于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  );
}); 
});

【问题讨论】：

标签： jquery

【解决方案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');
});

【讨论】：