jquery - 使用 jQuery/Javascript 向上或向下滚动整页高度

Question

我目前在一个网站上工作，该网站在滚动功能方面需要类似的东西:http://www.apple.com/iphone-5s/

我查看了网站的(苹果)代码，当然，正如我应该怀疑的那样，结果是空的。 我正在寻找一种方法来拥有可以滚动的整页 div(带有背景图像)，并且滚动到下一个 div 发生在鼠标的单个向上/向下滚动上。

我已经处理了动态整页 div，我什至几乎拥有向下滚动的功能，但它并没有像我预期的那样工作，我已经在这上面花了几天时间。

HTML:

<div class="splashPage mainDiv"></div>
<div id="containerHomes" class="mainDiv homesPosition"></div>

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;    
}

J查询:

<!-- 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>

我正在使用 Flesler 的 scrollTo 插件(实际上仍然没有代表发布超过 2 个链接)

它工作正常，但我还没有找到一种方法来完全证明以我想要的方式上下滚动。使用我在那里的东西，如果你(像很多用户一样)向滚轮发送垃圾邮件以向上/向下移动，我很确定 wheelDelta 计数会搞砸并且它将无法正常运行。

我已经尝试了谷歌前 10 页上几乎所有与作为功能向上和向下滚动相关的链接，以及 S.O. 上的大部分问题。是相对的。

我的主要目标是滚动功能。

Answer 1

在编写了像您这样的页面之后，我为此类网站创建了一个简单的插件 fullPage.js ( Blog article )

这是第一个版本。我会尽我所能继续改进它。例如，添加一个要从菜单中调用的方法会很好。以及为每个部分使用 o hastags (#)，等等。这应该在我在我的页面中使用它时尽快完成。

您可以在 my github account 找到有关其用法的更多信息

现场演示:http://alvarotrigo.com/fullPage/

工作于:(IE 8、Chrome、Firefox、Opera > 11、Safari、Touch 设备)

希望对您有所帮助!