JQuery ScrollTop滚动太远了
[英]JQuery ScrollTop scrolling too far
问题描述
I'm wanting to create basically a full page background image that, once the user clicks (anywhere), scrolls down to the remaining content and then hides itself. 
我想基本上创建一个完整的页面背景图像，一旦用户点击（任何地方），向下滚动到剩余的内容，然后隐藏自己。 Initially, there would be no scrollbar, then once the click>scrolltop has taken place, and the background div hidden, the scrollbar appears by removing the overflow-hidden class. 最初，没有滚动条，然后一旦点击> scrolltop发生，并且隐藏了背景div，则通过删除溢出隐藏类来显示滚动条。
My problem is that when I use the scrolltop by itself, the page does scroll directly to the element I've selected, but when I then add in the javascript code to hide the initial introduction div (on which the user clicks), the page jumps down far past the ScrollTop point. 我的问题是，当我单独使用scrolltop时，页面会直接滚动到我选择的元素，但是当我添加javascript代码以隐藏初始引入div（用户点击的那个）时，页面跳过ScrollTop点远远超过。
I've included my JSFiddle link here, if anyone has any thoughts. 如果有人有任何想法，我在这里包含了我的JSFiddle链接。
2 个解决方案
解决方案1
0 已采纳 2016-02-21 02:09:09
display: none is changing the height of .intro to 0, so you have two options: display: none将.intro的高度.intro为0，因此您有两个选项：
Change the CSS for .hidden to use visibility: hidden 更改.hidden的CSS以使用visibility: hidden
or 要么
Change the first parameter of .animate to take into account the height of .intro : $(".one").offset().top - $(".intro").height() 变化的第一个参数.animate考虑到的高度.intro ： $(".one").offset().top - $(".intro").height()
I'd also suggest putting the removeClass and addClass calls in a callback function, rather than using .delay() : 我还建议将removeClass和addClass调用放在回调函数中，而不是使用.delay() ：
Example with option 2 + callback usage: 选项2 +回调用法的示例：
$(document).ready(function() {
$(".intro").click(function() {
$('html, body').animate({
scrollTop: $(".one").offset().top - $(".intro").height()
}, 700, function() {
$("body").removeClass("bleh");
$(".intro").addClass("hidden");
});
});
});
解决方案2
0 2016-02-21 02:49:50
Is this helpful? 这有用吗？ After adding the hidden class you can scroll to the top of the one div. 添加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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.