如果用户位于当前部分的上半部分,则会自动滚动该部分的顶部。
然后,如果用户位于当前部分的下半部分,则会自动滚动到上一部分。
function autoScroll(aid){
var aTag = $("#"+ aid);
body.animate({scrollTop: aTag.offset().top},1500);
}
$(window).scroll(function() {
var windowScroll = $(window).scrollTop();
if(windowScroll < ($("#Section2").offset().top/2) && !(windowScroll > ($("#Section2").offset().top/2))){
section_id = 'Section1';
}
$(document).off('scroll');
console.log(section_id);
autoScroll(section_id);
});
答案 0 :(得分:1)
我在CODEPEN创建了一个工作示例。
<强> HTML 强>
.navigat
<强> CSS 强>
<section id="Section1" class="section"></section>
<section id="Section2" class="section"></section>
<section id="Section3" class="section"></section>
<强> JS 强>
.section {
width: 100%;
position: relative;
height: 300px;
}
#Section1 {
background: red;
}
#Section2 {
background: blue;
}
#Section3 {
background: orange;
}