我的网站上有那些切换 slider 。请在这里查看:
要重现问题,请点击“Kunden”,然后向下滚动并点击“Produkte”。现在你会注意到你被扔进了一个非常非常长的东西的中间。这激怒了网站的访问者。我想要实现的是,让内容的顶部始终位于视口(viewport)的某个位置。就像从顶部或视口(viewport)中心偏移 200px 一样。明白了吗?
这是使切换 slider 工作的当前代码:
$("p.trigger, h3.trigger").click(function () {
var $this = $(this);
var hasActive = $this.hasClass('active');
$("p.trigger, h3.trigger").removeClass("active");
$('.toggle_container').not($this.next()).slideUp();
if (!hasActive) {
$this.addClass("active");
}
$this.next().slideToggle(500);
return false; //Prevent the browser jump to the link anchor
});
感谢您的帮助。
最佳答案
您必须在第一个动画完成后开始第二个动画。为此,请使用 slideUp 的完整回调
$("p.trigger, h3.trigger").click(function () {
var $this = $(this);
var hasActive = $this.hasClass('active');
$("p.trigger, h3.trigger").removeClass("active");
$('.toggle_container').not($this.next()).slideUp(500, function() {
if (!hasActive) {
$this.addClass("active");
}
$this.next().slideToggle(500);
});
return false; //Prevent the browser jump to the link anchor
});
关于javascript - 如何将切换 slider 内容的顶部滚动到视口(viewport)中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20149451/