jQuery Accordion - 它会滚动到打开项目的顶部吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3621161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Accordion - will it scroll to the top of the open item?
提问by y0mbo
With the jQuery accordion control, how can I have it scroll to an item I've selected when it is off the screen?
使用 jQuery 手风琴控件，如何让它在屏幕外滚动到我选择的项目？
When:
什么时候：
- I have an accordion item with contents larger than the viewable window
- I scroll down to the second accordion item
- I click the second accordion item to display it
- The first accordion option collapses, and the second opens, but slides off screen.
- 我有一个内容大于可视窗口的手风琴项目
- 我向下滚动到第二个手风琴项目
- 我点击第二个手风琴项目来显示它
- 第一个手风琴选项折叠，第二个打开，但滑出屏幕。
Is there an option for the accordion to scroll to the second item?
手风琴是否可以选择滚动到第二项？
采纳答案by Ken Redler
You can try using the scrollTo jQuery plugin. It lets you do things like this:
您可以尝试使用scrollTo jQuery 插件。它可以让你做这样的事情：
$.scrollTo('div#foo'); // scroll the browser window so div#foo is in view
$('div#foo').('#bar'); // scroll within div#foo so #bar is in view
Bind ScrollTo()to the accordionactivateevent, like this:
绑定ScrollTo()到accordionactivate事件，像这样：
$('#youraccordion').bind('accordionactivate', function(event, ui) {
/* In here, ui.newHeader = the newly active header as a jQ object
ui.newContent = the newly active content area */
$( ui.newHeader ).ScrollTo(); // or ui.newContent, if you prefer
});
When is the accordionactivateevent triggered?
什么时候accordionactivate触发事件？
Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed,
ui.oldHeaderandui.oldPanelwill be empty jQuery objects. If the accordion is collapsing,ui.newHeaderandui.newPanelwill be empty jQuery objects.
在面板激活后（动画完成后）触发。如果手风琴以前倒塌，
ui.oldHeader并ui.oldPanel为空的jQuery对象。如果手风琴正在折叠，ui.newHeader并且ui.newPanel将是空的 jQuery 对象。
References: jQuery UI Accordion
参考资料：jQuery UI 手风琴
回答by iliyas Safi
It works for me and tested,
它对我有用并经过测试，
$( "#accordion" ).accordion({
heightStyle: "content",
collapsible: true,
active: false,
activate: function( event, ui ) {
if(!$.isEmptyObject(ui.newHeader.offset())) {
$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
}
}
});
回答by Martin
As I want collapse to be true I added an if test to cancel out the error of all items being collapsed. I also didn't want the header to be exactly at the top of the page, so I lowered the scrollTop location by 100:
因为我希望折叠是真的，所以我添加了一个 if 测试来取消所有被折叠项目的错误。我也不希望标题正好位于页面顶部，所以我将 scrollTop 位置降低了 100：
$(document).ready(function() {
$(".ui-accordion").bind("accordionchange", function(event, ui) {
if ($(ui.newHeader).offset() != null) {
ui.newHeader, // $ object, activated header
$("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500);
}
});
});
回答by nobody
I know this question is old, but none of the above worked as desired for me. This is how I accomplished it. The -50 was just in case this was going to appear in an iPad or iPhone webapp so that the page didn't scroll the top of the accordion header behind the status bar.
我知道这个问题很老，但以上都没有按我的需要工作。我就是这样实现的。-50 以防万一这将出现在 iPad 或 iPhone 网络应用程序中，以便页面不会滚动状态栏后面的手风琴标题的顶部。
$('#accordion').accordion({
collapsible: true,
autoHeight: false,
animated: false
});
$('.ui-accordion-header').bind('click',function(){
theOffset = $(this).offset();
$(window).scrollTop(theOffset.top - 50);
});
回答by Pranav Labhe
Please refer thisanswer by techfoobar
请参考techfoobar的这个答案
$(function() {
$("#accordion").accordion({
autoHeight: false,
collapsible: true,
heightStyle: "content",
active: 0,
animate: 300 // collapse will take 300ms
});
$('#accordion h3').bind('click',function(){
var self = this;
setTimeout(function() {
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 100 });
}, 310); // ensure the collapse animation is done
});
});
It is working for me with above modification.
通过上述修改，它对我有用。
$("#accordion").accordion({
heightStyle: "content",
collapsible: true,
activate: function (event, ui) {
try
{
var self = this;
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 100 });
} catch (e) {
alert(e);
}
}
});
回答by Stan Kroshchenko
Solution from Martin works great. However when you add this code it will scroll to the top always, no matter if your accordion is visible on the page or not.
Martin 的解决方案效果很好。但是，当您添加此代码时，无论您的手风琴在页面上是否可见，它都会始终滚动到顶部。
If you want to scroll to the top only when your accordion content larger than the viewable window, then use next code:
如果您只想在手风琴内容大于可视窗口时滚动到顶部，请使用以下代码：
$(document).ready(function() {
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(".accordion-inner").bind("accordionchange", function(event, ui) {
if ($(ui.newHeader).offset() != null) {
if (!isScrolledIntoView(ui.newHeader))
{
ui.newHeader, // $ object, activated header
$("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500);
}
}
});
});
回答by carcus88
I had problems with binding the event when you used the accordion click to close function. Adding just a single if statement fixed it thought.
当您使用手风琴单击关闭功能时，我在绑定事件时遇到了问题。只添加一个 if 语句就解决了它的想法。
$('#accordion').bind('accordionchange', function(event, ui) {
if(!ui.newHeader.length) { return; }
/* In here, ui.newHeader = the newly active header as a jQ object
ui.newContent = the newly active content area */
$.scrollTo( ui.newHeader ); // or ui.newContent, if you prefer
});
回答by adnan dogar
Simply use this function on window.load
只需在 window.load 上使用此函数
$(function() {
var icons = {
header: "ui-icon-circle-plus",
activeHeader: "ui-icon-circle-minus"
};
$( "#accordion" ).accordion({
icons: icons, autoHeight: false, collapsible: true, active: false,
activate: function(event, ui){
var scrollTop = $(".accordion").scrollTop();
var top = $(ui.newHeader).offset().top;
//do magic to scroll the user to the correct location
//works in IE, firefox chrome and safari
$("html,body").animate({ scrollTop: scrollTop + top -35 }, "fast");
},
});
});
perfectl wokring
完美的工作
回答by cris
Hey did have the same issue. Here is what worked for me at least what seems the easiest way. Using the scrollTo plugin.
嘿确实有同样的问题。这是对我有用的方法，至少看起来是最简单的方法。使用 scrollTo 插件。
<script type="text/javascript">
$(function(){
$('#youraccordionheader').click(function(){
$.scrollTo(this)
})
});
</script>
Hope it might be of use for someone.
希望它可能对某人有用。
回答by Charles Harmon
I implemented the first answer and liked this option best because it is one function for all accordion panels. But, I noticed that I kept getting an error when trying to (re)close the same accordion panel - it would halt the script at this line in the ScrollTo plugin:
我实现了第一个答案并且最喜欢这个选项，因为它是所有手风琴面板的一个功能。但是，我注意到在尝试（重新）关闭同一个手风琴面板时我一直收到错误消息 - 它会在 ScrollTo 插件的这一行停止脚本：
attr[key] = val.slice && val.slice(-1) == '%' ?
The val was returning empty, so I found another answer here that said to check for it empty and added / replaced this function - so it works now.
val 返回空，所以我在这里找到了另一个答案，说检查它是否为空并添加/替换了这个函数 - 所以它现在可以工作了。
else{
var val = targ[pos];
// Handle percentage values
if(val) {
attr[key] = val.slice && val.slice(-1) == '%' ?
parseFloat(val) / 100 * max
: val;
}
}
