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

问题描述

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

在提出这个问题的过程中，我上传了网站的一部分 - http://www.bnacademy.com.au/

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

我已经处理了动态整页 div，我什至几乎没有滚动功能，但它只是没有按我的预期工作，我已经花了几天的时间.

HTML:

<div id="containerHomes" class="mainDiv homePosition"></div>

CSS:

.homesPosition {顶部:100%；}.splashPage {背景:黑色；z-索引:-200；宽度:100%；高度:100%；位置:绝对；顶部:0；左:0；}#containerHomes {z-索引:-200；宽度:100%；高度:100%；位置:绝对；左:0；背景:url(../img/background-placeholder.jpg) 不重复；-webkit-background-size: 封面；-moz-background-size: 封面；-o-背景尺寸:封面；背景尺寸:封面；}

查询:

<script type="text/javascript">var height = $(window).height();var width = $(window).width();$(函数(){$(window).resize(function() {$(".mainDiv").height(height);$(".mainDiv").width(width);$("#sidebar").height(height);var height = $(window).height();var width = $(window).width();});});<!-- 上下滚动检测/移动--><script type="text/javascript">$(window).bind('mousewheel', function(event) {如果(event.originalEvent.wheelDelta >= 0){$(window).scrollTo('0%', 1000);}别的 {$(window).scrollTo('100%', 1000);}event.preventDefault()});

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

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

我几乎尝试了 google 前 10 页上与作为函数上下滚动相关的所有链接，以及关于 S.O. 的大多数问题.是相对的.

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

解决方案

在必须编写像您这样的页面后，我为此类网站创建了一个简单的插件 fullPage.js (博客文章)

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

您可以在 我的 github 帐户

中找到有关其用法的更多信息

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

适用于:(IE 8、Chrome、Firefox、Opera > 11、Safari、触摸设备)

希望能帮到你！

I'm currently working on a site which requires something similar to this in terms of scrolling functionality: 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/

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.

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>

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

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.

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.

解决方案

After having to code a page like yours, I've created a simple plugin for this kind of sites fullPage.js (Blog article)

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.

You can find more about its usage at my github account

Living demo: http://alvarotrigo.com/fullPage/

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

I hope it helps!

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