1

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

这是我目前的手风琴脚本：

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

我也做了这个小提琴，但它并没有像在移动设备上查看它时那样运行（除非你调整窗口/视口区域的大小。然后它就像在移动设备上一样运行。）

4

1 回答 1

1

我发现了这个相关的问题。

根据评论，您可以将element.scrollIntoView()其用于活动元素，因为这'在所有主要浏览器中都受支持'。

还提到了一个jquery 插件（在第三个答案中），它做同样的事情。

如果你绑定到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);
            }
        }
    });
于 2012-07-17T15:46:14.327 回答