使用jquery手风琴滚动到顶部按钮

Question

我有一组按钮，使用jquery手风琴（用于移动网站）显示内容。我想知道最好的方法是什么，当用户选择另一个按钮时，它会滚动到所选按钮的顶部。

以下是我目前手风琴剧本的内容：

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

我也制作了this fiddle，但它的功能并不像在移动设备上查看时那样（除非您调整窗口/视口区域的大小。然后它的功能就像在移动设备上一样。 ）

Answer 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函数/插件，因为你按下的按钮通常已经在视图中（你怎么按它...）。 / 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);
            }
        }
    });