Question

我需要使用单页滚动部分对网站进行编码而不使用插件（如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);
        }
    }
});

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

Answer 1

我删除了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();
				});
	}
});

滚动部分随机滚动

1 个答案: