使用jQuery / Javascript向上或向下滚动整页高度
我目前正在开发一个网站，在滚动function方面需要类似的东西： http ： //www.apple.com/iphone-5s/
在提出这个问题的过程中，我上传了一部分网站 – http://www.bnacademy.com.au/
我仔细查看了该网站的（苹果）代码，当然，正如我应该怀疑的那样，它是空的。 我正在寻找一种方法可以滚动浏览整页div（带有背景图像），滚动到下一个div就可以通过鼠标进行单个向上/向下滚动。
我已经处理了动态的全页div，我几乎甚至没有滚动function，但它只是没有按照我的预期工作，我已经花了几天时间。
HTML：
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的：
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(); }); }); $(window).bind('mousewheel', function(event) { if (event.originalEvent.wheelDelta >= 0) { $(window).scrollTo('0%', 1000); } else { $(window).scrollTo('100%', 1000); } event.preventDefault() });
我正在使用Flesler的scrollTo插件（实际上还没有代表发布超过2个链接）
哪个工作正常，但我还没有找到一种方法来完全按照我想要的方式上下滚动。 使用我在那里的东西，如果你（像很多用户一样）垃圾滚轮上下移动我很确定wheelDelta计数搞砸了，它将无法正常运行。
我几乎尝试了谷歌前10页的每一个链接，关于向上和向下滚动作为function，以及关于SO的大多数问题是相对的。
我的主要目标是滚动function，提前感谢。
在编写了像你这样的页面之后，我为这类网站创建了一个简单的插件fullPage.js （ 博客文章 ）
它是第一个版本。 我会尽我所能继续改进它。 例如，添加要从菜单调用的方法会很好。 以及为每个部分使用o hastags（＃），等等。 这应该在我在我的页面中使用它时尽快完成。
您可以在我的github帐户中找到有关其用法的更多信息
生活演示： http ： //alvarotrigo.com/fullPage/
在以下工作：（IE 8，Chrome，Firefox，Opera> 11，Safari，Touch设备）
我希望它有所帮助！
试试这个脚本
$(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; });
FIDDLE DEMO
全屏演示
我一直在摆弄类似问题的解决方案。
我的所有解决方案都是在窗口滚动时监控。
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
如果它滚动超过“页面”的末尾超过50px jquery动画滚动到下一个“页面”。
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
向上滚动也是如此。 这包括通过鼠标，键盘或JavaScript进行滚动。
查看http://jsfiddle.net/dLCwC/1/上的完整代码
也许它对某人有用（让我知道它是否，或不是）。
确保身高不高：100％或高度：100vh。 我有这个完全相同的问题，唯一修复它的是删除它。