jQuery滚动到元素不工作

Question

我正在使用两列放在一起的日历/事件页面。我设法做了一些滚动工作（自动滚动到当前事件/月;通过点击日历中的事件摘要滚动到事件详细信息），但由于某种原因，我似乎无法得到上/下滚动为任一列工作。我在上一个/下一个选择器上设置了“.current”类，它可以工作，但滚动是不行的。没有得到任何错误。

它必须是想错了该生产线是

container.animate({ 
    scrollTop: $('.current').offset().top - 
        container.offset().top + 
        container.scrollTop() 
}, 500) 

我相当肯定我只是忽视的东西简单，但如果任何人有一个建议，以什么，我会非常感激！

更新： 我设法找到关于向上/向下滚动不起作用的问题。我引用了错误的选择器。

但是，我现在遇到了一个新问题。在第一次点击（向上或向下）时，尽管类“current”已正确设置，但没有任何滚动。在第二次点击（相同的方向）事情滚动，但列表永远不会到达第一个/最后一个项目。在相反方向点击时，列表继续沿-previous方向滚动一次，然后继续以正确的方向滚动。

我希望我的描述不会造成混淆:)试试小提琴，你可能会明白我的意思。

更新的代码可以在http://jsfiddle.net/4E4V8/3/找到。

Answer 1

如果你把if和alert(scrollTo.offset().top + ', ' + container.offset().top + ', ' + container.scrollTop());else if中的提醒，你会看到，即使thoug h对象不会在第一次点击时移动，scrollTo.offset().top会从第一次点击改变为第二次点击。我不知道为什么，但事实并非如此。在比较第一次和第二次点击之间的差异并查看对象的CSS后，我发现第一次和第二次点击之间的差异是对象的高度+它的边缘底部（您唯一的垂直边距）。

结果，我只是改变线

container.animate({ 
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() 
}, 300); 

到

container.animate({ 
    scrollTop: scrollTo.height() + parseInt(scrollTo.css('margin-bottom')) + scrollTo.offset().top - container.offset().top + container.scrollTop() 
}, 300); 

Here is the jsFiddle。

使用警报，尤其是变量值，对于调试非常有用

Answer 2

它并不完美，但这里是一个起点：jsFiddle

我已经改变了HTML，所以它会更有意义对我说：

<div id="events-container"> 
     <div id="events-detail"> 
      <div class="container"></div> 
      <div class="nav"></div> 
     </div> 
     <div id="events-overview"> 
      <div class="container"></div>          
      <div class="nav"></div> 
     </div> 
    </div> 

的.js文件仍然没有100％右，但主要思路是：

function navUp(e) { 
     // get .container div 
     var container = $(this.parentElement.previousElementSibling); 
     // find .current event div 
     var current = container.children(".current"); 
     // get the up span 
     var button = $(e.target); 
     // does .current event div has a next event div ? 
     if(current[0].nextElementSibling){ 
      // add .current to next event div 
      var next = $(current[0].nextElementSibling).addClass("current"); 
      // remove .current class from original event div 
      container.children("div").not(next).removeClass("current"); 
      // animate 
      container.animate({ 
      scrollTop: current[0].nextElementSibling.offsetTop - current.offset().top 
      }, 100); 
     } 
    };