使用 jQuery/Javascript 向上或向下滚动整页高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18953652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scroll a full page height up or down with jQuery/Javascript
提问by XstiX
I'm currently working on a site which requires something similar to this in terms of scrolling functionality: http://www.apple.com/iphone-5s/
我目前正在一个网站上工作，该网站在滚动功能方面需要与此类似的内容：http: //www.apple.com/iphone-5s/
In the middle of making this question I got part of the site uploaded - http://www.bnacademy.com.au/
在提出这个问题的过程中，我上传了网站的一部分 - http://www.bnacademy.com.au/
I've look through the site's (apple's) code and of course, as I should have suspected, came up empty. I'm looking for a way to have full-page divs (with background images) that can be scrolled through, and the scrolling to the next div happens on a single up/down scroll by the mouse.
我已经浏览了网站（苹果的）代码，当然，正如我应该怀疑的那样，结果是空的。我正在寻找一种方法来拥有可以滚动的整页 div（带有背景图像），并且滚动到下一个 div 发生在鼠标的单个向上/向下滚动中。
I've handled the dynamic full-page divs, I almost even had the scrolling functionality down but it's just not working how I expected and I've already spent a couple of days on this.
我已经处理了动态整页 div，我什至几乎没有滚动功能，但它只是没有按我的预期工作，我已经花了几天时间。
HTML:
HTML：
<div class="splashPage mainDiv"></div>
<div id="containerHomes" class="mainDiv homesPosition"></div>
CSS:
CSS：
.homesPosition {
top: 100%;
}
.splashPage {
background: black;
z-index: -200;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#containerHomes {
z-index: -200;
width: 100%;
height: 100%;
position: absolute;
left: 0;
background:url(../img/background-placeholder.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Jquery:
查询：
<!-- Keep the div at max page height and width -->
<script type="text/javascript">
var height = $(window).height();
var width = $(window).width();
$(function() {
$(window).resize(function() {
$(".mainDiv").height(height);
$(".mainDiv").width(width);
$("#sidebar").height(height);
var height = $(window).height();
var width = $(window).width();
});
});
</script>
<!-- Scroll up and down detection/movement -->
<script type="text/javascript">
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
$(window).scrollTo('0%', 1000);
}
else {
$(window).scrollTo('100%', 1000);
}
event.preventDefault()
});
</script>
I'm using the scrollTo plugin by Flesler (still don't actually have the rep to post more than 2 links)
我正在使用 Flesler 的 scrollTo 插件（实际上仍然没有代表发布超过 2 个链接）
Which is working fine, but I've yet to find a way to have a full-proof way of scrolling up and down the way I want it. Using what I have up there, if you (like a lot of users) spam the scroll wheel to go up/down I'm pretty sure the wheelDelta count gets messed up and it won't be able to operate properly.
哪个工作正常，但我还没有找到一种方法来以我想要的方式上下滚动。使用我在那里的东西，如果您（像很多用户一样）向滚轮发送垃圾邮件以向上/向下，我很确定wheelDelta 计数被搞砸了，它将无法正常运行。
I've tried practically every link on the first 10 pages on google relating to scrolling up and down as functions, as well as most of the questions on S.O. that are relative.
我几乎尝试了 google 前 10 页上与作为函数向上和向下滚动相关的每个链接，以及关于 SO 的大多数相关问题。
My main goal is the scroll functionality.
我的主要目标是滚动功能。
回答by Alvaro
After having to code a page like yours, I've created a simple plugin for this kind of sites fullPage.js(Blog article)
在必须编写像您这样的页面后，我为此类站点创建了一个简单的插件fullPage.js（博客文章）
It is in its first version. I will keep improving it as far as I can. Adding a method to be called from a menu would be nice, for example. As well as use o hastags (#) for each section, and so on. This should be done soon as I am using it in my page.
它是第一个版本。我会尽可能地继续改进它。例如，添加一个从菜单调用的方法会很好。以及为每个部分使用 o hastags (#)，依此类推。这应该在我在我的页面中使用它时尽快完成。
You can find more about its usage at my github account
您可以在我的 github 帐户中找到有关其用法的更多信息
Living demo: http://alvarotrigo.com/fullPage/
现场演示：http: //alvarotrigo.com/fullPage/
Working in: (IE 8, Chrome, Firefox, Opera > 11, Safari, Touch devices)
工作于：（IE 8、Chrome、Firefox、Opera > 11、Safari、Touch 设备）
I hope it helps!
我希望它有帮助！
回答by Vaibs_Cool
Try this script
试试这个脚本
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
} else {
dir = 'up';
}
// find currently visible div :
div = -1;
divs.each(function(i){
if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
div = i;
}
});
if (dir == 'up' && div > 0) {
div--;
}
if (dir == 'down' && div < divs.length -1) {
div++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 200);
return false;
});
回答by Paul Gorton
I've been fiddling with a solution to a similar problem.
我一直在摆弄类似问题的解决方案。
All my solution does is monitor when the window scrolls.
我的所有解决方案都是在窗口滚动时进行监视。
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
如果它滚动超过“页面”的末尾超过 50 像素 jquery 动画滚动到下一个“页面”。
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
向上滚动也是如此。这包括通过鼠标、键盘或 javascript 滚动。
Check out the full code at http://jsfiddle.net/dLCwC/1/
在http://jsfiddle.net/dLCwC/1/查看完整代码
Maybe it'll be of some use to someone (let me know if it is, or isn't).
也许它对某人有用（让我知道它是否有用）。
回答by user3880247
Make sure you don't have height:100% or height:100vh on the body. I had this exact same issue and the only thing that fixed it was removing this.
确保身体上没有 height:100% 或 height:100vh。我遇到了完全相同的问题，唯一可以解决的就是删除它。
