我有一个jQuery下拉列表，显示高度为500px的div。问题是显示此div的链接位于页面折叠上方，淡入淡出的下拉列显示在折叠下方。
我一直在尝试使用scroll.to来移动页面，如果新的div不在视图中（但如果用户完全可见则将用户留在原处） - 遗憾的是没有成功。
原始代码（运行良好但可能简化）是：
// Homepage Theme Details Panel
// Expand Panel
$("#theme-1").click(function(){
if ($("#theme-1-content").is(":hidden")) {
if ($("#theme-details-wrap").is(":hidden")) {
$("#theme-1-content").fadeIn(2000);
$("#theme-details-wrap").slideDown(2000);
$('#slider-content a#theme-1').addClass('theme-active');
} else { // theme-details-wrap is open
$("#theme-2-content").hide();
$("#theme-3-content").hide();
$("#theme-4-content").hide();
$("#theme-5-content").hide();
$("#theme-6-content").hide();
$("#theme-1-content").fadeIn(2000);
$('#slider-content a').removeClass('theme-active');
$('#slider-content a#theme-1').addClass('theme-active');
return false;
}
} else { // theme-1-content is shown so close
$("#theme-details-wrap").slideUp(1000);
$("#theme-1-content").fadeOut(1000);
$('#slider-content a').removeClass('theme-active');
}
});
$("#theme-2").click(function(){
if ($("#theme-2-content").is(":hidden")) {
if ($("#theme-details-wrap").is(":hidden")) {
$("#theme-2-content").fadeIn(2000);
$("#theme-details-wrap").slideDown(2000);
$('#slider-content a#theme-2').addClass('theme-active');
} else { // theme-details-wrap is open
$("#theme-1-content").hide();
$("#theme-3-content").hide();
$("#theme-4-content").hide();
$("#theme-5-content").hide();
$("#theme-6-content").hide();
$("#theme-2-content").fadeIn(2000);
$('#slider-content a').removeClass('theme-active');
$('#slider-content a#theme-2').addClass('theme-active');
return false;
}
} else { // theme-2-content is shown so close
$("#theme-details-wrap").slideUp(1000);
$("#theme-2-content").fadeOut(1000);
$('#slider-content a').removeClass('theme-active');
}
});
$("#theme-3").click(function(){
if ($("#theme-3-content").is(":hidden")) {
if ($("#theme-details-wrap").is(":hidden")) {
$("#theme-3-content").fadeIn(2000);
$("#theme-details-wrap").slideDown(2000);
$('#slider-content a#theme-3').addClass('theme-active');
} else { // theme-details-wrap is open
$("#theme-1-content").hide();
$("#theme-2-content").hide();
$("#theme-4-content").hide();
$("#theme-5-content").hide();
$("#theme-6-content").hide();
$("#theme-3-content").fadeIn(2000);
$('#slider-content a').removeClass('theme-active');
$('#slider-content a#theme-3').addClass('theme-active');
return false;
}
} else { // theme-3-content is shown so close
$("#theme-details-wrap").slideUp(1000);
$("#theme-3-content").fadeOut(1000);
$('#slider-content a').removeClass('theme-active');
}
});
$("#theme-4").click(function(){
if ($("#theme-4-content").is(":hidden")) {
if ($("#theme-details-wrap").is(":hidden")) {
$("#theme-4-content").fadeIn(2000);
$("#theme-details-wrap").slideDown(2000);
$('#slider-content a#theme-4').addClass('theme-active');
} else { // theme-details-wrap is open
$("#theme-1-content").hide();
$("#theme-2-content").hide();
$("#theme-3-content").hide();
$("#theme-5-content").hide();
$("#theme-6-content").hide();
$("#theme-4-content").fadeIn(2000);
$('#slider-content a').removeClass('theme-active');
$('#slider-content a#theme-4').addClass('theme-active');
return false;
}
} else { // theme-4-content is shown so close
$("#theme-details-wrap").slideUp(1000);
$("#theme-4-content").fadeOut(1000);
$('#slider-content a').removeClass('theme-active');
}
});
$("#theme-5").click(function(){
if ($("#theme-5-content").is(":hidden")) {
if ($("#theme-details-wrap").is(":hidden")) {
$("#theme-5-content").fadeIn(2000);
$("#theme-details-wrap").slideDown(2000);
$('#slider-content a#theme-5').addClass('theme-active');
} else { // theme-details-wrap is open
$("#theme-1-content").hide();
$("#theme-2-content").hide();
$("#theme-3-content").hide();
$("#theme-4-content").hide();
$("#theme-6-content").hide();
$("#theme-5-content").fadeIn(2000);
$('#slider-content a').removeClass('theme-active');
$('#slider-content a#theme-5').addClass('theme-active');
return false;
}
} else { // theme-5-content is shown so close
$("#theme-details-wrap").slideUp(1000);
$("#theme-5-content").fadeOut(1000);
$('#slider-content a').removeClass('theme-active');
}
});
$("#theme-6").click(function(){
if ($("#theme-6-content").is(":hidden")) {
if ($("#theme-details-wrap").is(":hidden")) {
$("#theme-6-content").fadeIn(2000);
$("#theme-details-wrap").slideDown(2000);
$('#slider-content a#theme-6').addClass('theme-active');
} else { // theme-details-wrap is open
$("#theme-1-content").hide();
$("#theme-2-content").hide();
$("#theme-3-content").hide();
$("#theme-4-content").hide();
$("#theme-5-content").hide();
$("#theme-6-content").fadeIn(2000);
$('#slider-content a').removeClass('theme-active');
$('#slider-content a#theme-6').addClass('theme-active');
return false;
}
} else { // theme-6-content is shown so close
$("#theme-details-wrap").slideUp(1000);
$("#theme-6-content").fadeOut(1000);
$('#slider-content a').removeClass('theme-active');
}
});
// Collapse Button
$(".collapse").click(function(){
$("#theme-details-wrap").slideUp(1000);
$("#theme-1-content").fadeOut(1000);
$("#theme-2-content").fadeOut(1000);
$("#theme-3-content").fadeOut(1000);
$("#theme-4-content").fadeOut(1000);
$("#theme-5-content").fadeOut(1000);
$("#theme-6-content").fadeOut(1000);
$('#slider-content a').removeClass('theme-active');
});
});
如果不在视图中，我如何添加代码以显示＃theme-details-wrap div？
非常感谢，
詹姆斯
答案 0 :(得分：2)
您使用什么插件滚动浏览器窗口？
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
将浏览器窗口滚动到匹配元素的示例代码：
$.scrollTo('#theme-details-wrap');
如果要在滚动窗口之前检查元素是否可见，请查看此主题中的代码：
Check if element is visible after scrolling
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
您可以修改最后一行中的条件以确保该元素完全可见 - 如果没有，您可以滚动浏览器窗口。
答案 1 :(得分：0)
此功能：
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
这样称呼：
$('#theme-details-wrap').scrollView();