2012-07-17 52 views
1

我有一组使用jQuery手风琴(手机网站)显示内容的按钮。我想知道什么是最好的方式,以便当用户选择另一个按钮时,它会滚动到所选按钮的顶部。使用jquery手风琴滚动到顶部按钮accordian

这是我目前有我的手风琴脚本:

$("#accordion").accordion({ 
     collapsible: true, 
     active: false, 
     autoHeight: false, 
     clearStyle: true 
    }); 
}); 

我也做了this fiddle,但它并没有真正的功能就像它在移动设备上观看它时,(除非你调整窗口的大小呢/然后它的功能就像在移动设备上一样)。

回答

1

我找到了this related question

根据评论,您可以使用element.scrollIntoView()作为活动元素,因为此'在所有主流浏览器的“”均受支持。

还有一个提到jquery plugin(在第三个答案),它做同样的事情。

如果您绑定到change事件手风琴,下面应该工作:

$('#myaccordion').accordion({ 
    // .. other options 
    change: function(event, ui) { 
      ui.newHeader.scrollIntoView(); // or scrollintoview(), 
              // if you're using the plugin 
      } 
}); 

我还没有尝试过任何解决方案,也许你可以发表评论,如果其中一人的作品?

编辑

重读你的问题似乎,你不会需要scrollIntoView功能/插件,后因为按通常已经在视图(你会如何把它压按钮.. )。

因此,您可能只使用window.scroll(或使用任何可滚动的顶级容器)。

根据您的jsfiddle例如,下面似乎工作:

$("#accordion").accordion({ 
     collapsible: true, 
     active: false, 
     autoHeight: false, 
     clearStyle: true, 
     change: function(event, ui) { 
      if (ui.newHeader) { 
      var scrollTop = ui.newHeader.position().top; 
      window.scroll(0,scrollTop); 
      } 
     } 
    }); 
+0

嗯。那么,我试图添加scrollIntoView插件,似乎并没有工作。除非我把它设置错误。这里我更新的小提琴: http://jsfiddle.net/ultraloveninja/6skgc/6/ – ultraloveninja 2012-07-17 16:13:06

+0

好吧,我试图让你的例子工作,相应地编辑了答案... – MartinStettner 2012-07-28 10:12:16