0

我需要在不使用插件（如fullPage.js）的情况下编写带有单页滚动部分的网站。所以我刚刚创建了 6 个部分，例如： 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="hlpjs.js" type="text/javascript"></script>
<title>My Website</title>
<link href="hlpcss.css" rel="stylesheet" type="text/css">
</head>

<body>
    <section id="section1">
        <h1>text1</h1>
    </section>
    <section id="section2">
        <h1>text2</h1>
    </section>
    <section id="section3">
        <h1>text3</h1>  
    </section>
    <section id="section4">
        <h1>text4</h1>  
    </section>
    <section id="section5">
        <h1>text5</h1>  
    </section>
    <section id="section6">
        <h1>text6</h1>  
    </section>
</body>

我试图滚动浏览 javascript 文档中的各个部分，如下所示：

var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        if (count < 6) {
            count++;
            $('html, body').animate({

                    scrollTop: $("#section"+count).offset().top
            }, 2000);
        }
    } else {
        if(count>1){
            count--;
            $('html, body').animate({
                    scrollTop: $("#section"+count).offset().top
            }, 2000);
        }
    }
});

但它不能正常工作。它只是随机滚动，直到它位于顶部（或底部）然后停止。

4

1 回答 1

0

我删除了 if 语句并添加了完整的回调，所以现在它可以工作了。我现在唯一的问题是我可以无限上下滚动，但是如果我尝试添加任何 if 语句，动画根本不起作用（有什么建议吗？）。否则我会这样做：

var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
		count--;
        $('html, body').animate({
                    scrollTop: $("#section"+count).offset().top
                }, 1000,function(){
        $('html, body').clearQueue();
				});
    }
    else {
		count++;
        $('html, body').animate({
                    scrollTop: $("#section"+count).offset().top
                }, 1000,function(){
        $('html, body').clearQueue();
				});
	}
});

于 2016-03-31T19:23:01.200 回答