我想创建一个完整的页面背景图像，一旦用户点击（任何地方），就会向下滚动到剩余的内容，然后隐藏自己。最初不会有滚动条，然后一旦发生 click>scrolltop，并且背景 div 被隐藏，滚动条会通过删除溢出隐藏类出现。
我的问题是，当我单独使用 scrolltop 时，页面会直接滚动到我选择的元素，但是当我添加 javascript 代码以隐藏初始介绍 div（用户单击）时, 页面跳下远远超过 ScrollTop 点。
如果有人有任何想法，我已在此处包含我的 JSFiddle 链接。
【问题讨论】：
标签： javascript jquery html css
display: none 正在将.intro 的高度更改为 0，因此您有两种选择：
将 .hidden 的 CSS 更改为使用 visibility: hidden
或
更改.animate的第一个参数以考虑.intro的高度：$(".one").offset().top - $(".intro").height()
我还建议将removeClass 和addClass 调用放在回调函数中，而不是使用.delay()：
选项 2 + 回调用法示例：
$(document).ready(function() {
$(".intro").click(function() {
$('html, body').animate({
scrollTop: $(".one").offset().top - $(".intro").height()
}, 700, function() {
$("body").removeClass("bleh");
$(".intro").addClass("hidden");
});
});
});
【讨论】：
html 元素，但它没有显示为边距或填充，它不影响 @987654333 @。可能只是因为该工具的查看器窗口在 iframe 中加载了内容。我也试过 JSBIn，结果是一样的。
这有用吗？添加hidden 类后，您可以滚动到one div 的顶部。
$(function(){
$(".intro").on("click", function(){
$("body").removeClass("bleh");
$("html, body").animate({
scrollTop : $(".one").offset().top
}, function(){
$(".intro").addClass("hidden")
$(document).scrollTop(0)
})
})
})html, body{
height: 100%;
}
body{
margin: 0;
}
.bleh{
overflow: hidden;
}
.hidden{
display: none;
}
.intro{
background: red;
text-align: center;
padding: 20px;
background-position: center;
background-size: cover;
height: 100%;
}
.one {
width: 100%;
background-color: black;
display: block;
height: 400px;
}
.two {
width: 100%;
background-color: blue;
display: block;
height: 400px;
}
.three {
width: 100%;
background-color: black;
display: block;
height: 400px;
}
.four {
width: 100%;
background-color: blue;
display: block;
height: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body class="bleh">
<div class="intro">
<h1>Click anywhere to scroll down to main content</h1>
</div>
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</body>【讨论】：