我有一组按钮,使用jquery手风琴(用于移动网站)显示内容。我想知道最好的方法是什么,当用户选择另一个按钮时,它会滚动到所选按钮的顶部。
以下是我目前手风琴剧本的内容:
$( "#accordion" ).accordion({
collapsible: true,
active: false,
autoHeight: false,
clearStyle: true
});
});
我也制作了this fiddle,但它的功能并不像在移动设备上查看时那样(除非您调整窗口/视口区域的大小。然后它的功能就像在移动设备上一样。 )
答案 0 :(得分:1)
根据评论,您可以使用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
函数/插件,因为你按下的按钮通常已经在视图中(你怎么按它...)。 / p>
因此,您可以使用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);
}
}
});