JQuery ScrollTop滚动过远
JQuery ScrollTop滚动过远
提问于 2016-02-20 17:48:15
我想要创建一个完整的页面背景图像，一旦用户点击(任何地方)，滚动到剩余的内容，然后隐藏自己。最初，不存在滚动条，然后一旦发生了click>scrolltop，后台div隐藏了，滚动条就会通过删除溢出隐藏类出现。
我的问题是，当我单独使用滚动顶时，页面确实会直接滚动到我选择的元素，但是当我添加javascript代码以隐藏初始介绍div (用户单击的位置)时，页面会跳到scrolltop点之后。
如果有人有任何想法的话，我已经在这里包含了我的JSFiddle链接。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-20 18:09:09
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");
});
});
});Stack Overflow用户
发布于 2016-02-20 18:49:50
这有用吗？添加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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35531352
复制相关文章
相似问题
jQuery滚动过远
ScrollTop - jQuery不滚动
jQuery scrollTop不滚动
jQuery .scrollTop没有正确滚动
jQuery - scrollTop命令未滚动
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
