使用jQuery / Javascript向上或向下滚动整页高度 [英] scroll a full page height up or down with jQuery/Javascript

问题描述

我目前正在处理一个网站，在滚动功能方面需要类似的内容： http：// www。 apple

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.bnacademy.com.au/

In the middle of making this question I got part of the site uploaded - http://www.bnacademy.com.au/

我浏览了网站的苹果的）代码，当然，因为我应该怀疑，空了。
我正在寻找一种方法来具有可以滚动通过的全页面div（带有背景图像），滚动到下一个div发生在单个向上/向下滚动鼠标。

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，我几乎甚至有滚动功能，但它只是没有按我的预期工作，我已经花了几天This。

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.

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

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>

我正在使用Flesler的scrollTo插件比2个链接）

I'm using the scrollTo plugin by Flesler (still don't actually have the rep to post more than 2 links)

这是工作正常，但我还没有找到一种方法，有一个完整的方式，滚动我想要的方式。使用我在那里，如果你（喜欢很多用户）垃圾邮件滚轮上/下我很确定wheelDelta计数弄乱了，它将无法正常操作。

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.

我已经尝试过谷歌上前10页的几乎每个链接，关于作为函数上下滚动，以及大多数关于SO的问题

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.

我的主要目标是滚动功能，提前感谢。

My main goal is the scroll functionality, thanks in advance.

推荐答案

在为你的页面编写代码后，我为这种网站创建了一个简单的插件 fullPage.js ：
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/

After having to code a page like yours, I've created a simple plugin for this kind of sites fullPage.js: http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/

这是它的第一个版本。我会尽我所能继续改进。例如，从菜单中添加要调用的方法将会很好。以及对每个部分使用o hastags（＃），等等。

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.

您可以在我的github帐户中找到更多关于它的用法：
https://github.com/alvarotrigo/fullPage.js

You can find more about its usage at my github account: https://github.com/alvarotrigo/fullPage.js

生活演示： http://alvarotrigo.com/fullPage/

工作地点：（ IE 8，Chrome，Firefox，Opera> 11，Safari，Touch devices）

Working in: (IE 8, Chrome, Firefox, Opera > 11, Safari, Touch devices)

我希望它有帮助！

这篇关于使用jQuery / Javascript向上或向下滚动整页高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！