У меня есть сценарий jQuery, который появляется и исчезает между контейнерами внутри их родительского контейнера.В зависимости от нажатой кнопки (дизайн, веб) он определяет, какой контейнер (#design
, #web
) исчезает, а какой - на своем месте.
Теперь суть здесь, оба этиконтейнеры (#design
, #web
) отличаются по высоте, поэтому, когда я постепенно исчезаю между этими контейнерами, страница переходит на определенную позицию сразу после завершения вызова функции fadeIn()
.Эта позиция (x, y) в точности совпадает с позицией, в которой находилась бы страница, если бы внутри родительского контейнера (т. Е. Пустого контейнера) не было видно никаких контейнеров (#design
, #web
)и страница была прокручена вплоть до дна .
Кто-нибудь еще сталкивался с этим раньше?Любой совет очень ценится, так как эта проблема беспокоит меня бесконечно.
PS.Я проверил это в Firefox и Safari, и оба показали ту же проблему.
// edit 1: Вот URL, который вы можете проверить: http://toolboxstudio.co.za/version3/?page=packages
Если вы хотите увидеть, как контейнер будет выглядеть пустым: http://toolboxstudio.co.za/version3/?page=packages#empty,, затем вы можете нажать кнопку (Дизайн или Веб) чуть ниже баннера.Это будет постепенно корректно отображаться и переключаться между ними.Убедитесь, что ваша страница умещается только на целую страницу с пустым контейнером без лишнего пространства под нижним колонтитулом.Затем нажмите на кнопки и прокрутите маленькие пути вниз, переключаясь между двумя кнопками.Вы поймете, что я имею в виду при переходе по страницам.
Вот код:
$("div.design.button a").click(function () {
$(this).parent("div").addClass("active");
$("div.web.button").removeClass("active");
if ($("div.web_content").is(":visible")) {
$("div.web_content").fadeOut(function () {
$("div.design_content").fadeIn();
});
} else {
$("div.design_content").fadeIn();
}
window.location.hash = "#design";
resizeWindow();
e.returnValue = false;
e.preventDefault();
return false;
alert("hello");
});
$("div.web.button a").click(function () {
$(this).parent("div").addClass("active");
$("div.design.button").removeClass("active");
if ($("div.design_content").is(":visible")) {
$("div.design_content").fadeOut(function () {
$("div.web_content").fadeIn();
return false;
});
} else {
$("div.web_content").fadeIn();
return false;
}
window.location.hash = "#web";
resizeWindow();
e.returnValue = false;
e.preventDefault();
return false;
alert("world");
});