Question

我们正常滚动页面，下一部分应该位于页面顶部。无需单鼠标滚轮。

.bg1 {
	background-color: #C5876F;
	height: 1000px;
}
.bg2 {
	background-color: #7882BB;
	height: 1000px;
}
.bg3 {
	background-color: #8AC196;
	height: 900px;
}
.bg4 {
	background-color: #DD9698;
	height: 1000px;
}
h1 {
	text-align: center;
	padding-top: 50px;
	margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="section1" class="bg1">
	<h1>Section 1</h1>
</section>

<section id="section2" class="bg2">
	<h1>Section 2</h1>
</section>
	
<section id="section3" class="bg3">
	<h1>Section 3</h1>
</section>
	
<section id="section4" class="bg4">
	<h1>Section 4</h1>
</section>

我们滚动页面，下一部分应该位于页面顶部

Answer 1

假设您要在单个鼠标滚轮事件下滚动到下一部分：

$(document).ready(function () {
    var sections = $('.bg');
    var dir = 'up'; // wheel scroll direction
    var section = 0; // current section
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible section :
        section = -1;
        sections.each(function(i){
            if (section<0 && ($(this).offset().top >= $(window).scrollTop())) {
                section = i;
            }
        });
        if (dir == 'up' && section > 0) {
            section--;
        }
        if (dir == 'down' && section < sections.length) {
            section++;
        }
        if (section == sections.length) return;
        $('html,body').stop().animate({
            scrollTop: sections.eq(section).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(sections.eq(section).offset().top);
    });
});

#section1 {
	background-color: #C5876F;
	height: 1000px;
}
#section2 {
	background-color: #7882BB;
	height: 1000px;
}
#section3 {
	background-color: #8AC196;
	height: 900px;
}
#section4 {
	background-color: #DD9698;
	height: 1000px;
}
h1 {
	text-align: center;
	padding-top: 50px;
	margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="section1" class="bg">
	<h1>Section 1</h1>
</section>

<section id="section2" class="bg">
	<h1>Section 2</h1>
</section>
	
<section id="section3" class="bg">
	<h1>Section 3</h1>
</section>
	
<section id="section4" class="bg">
	<h1>Section 4</h1>
</section>

我们正常滚动页面，下一节应该转到页面顶部

1 个答案: