2011-10-04 101 views
0

我试图使用scrollTo jQuery插件,以滚动的某些内容水平:jQuery的scrollTo,DIV不滚动

HTML

<a id="back">Back</a> 
<div id="placeholder"> 
    <div id="content">Content goes here</div> 
</div> 
<a id="forward">Forward</a> 

CSS

#placeholder { width: 640px; height: 480px; overflow: hidden; } 
#content { width: 9999em; } 

的JavaScript

$("#back").click(function(){ 
    $('#content').scrollTo({left:'-=100px'} , 500); 
    }); 
    $("#forward").click(function(){ 
    $('#content').scrollTo({left: '+=100px'} , 500); 
    }); 

我尝试过在很多方面应用scrollTo,现在我开始怀疑它是否与我正在使用的最新版本的jQuery兼容。没有JavaScript错误出现,并且我可以在链接函数中调用警报或类似内容,但#内容不想移动。我在这里错过了什么吗?

回答

3

除非是位置:相对,固定或绝对位置,否则css'left'属性将不会执行任何操作。另外,你可以使用.animate()而不是.scrollTo,因为它听起来像你安装的任何插件都是无关的。

试试这个的jsfiddle:http://jsfiddle.net/ndz5K/4/

我只是改变(1)#内容的CSS相对,和(2).scrollTo()来.animate()

+0

现在你提到它,jQuery的animate()似乎也工作得很好。谢谢! –

1

是,包括下面的代码片段,

$("#clickhere").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#scrolltodiv").offset().top 
    }, 2000); 
    return false; 
});