jQuery autoScroll到最近的部分

时间:2016-02-21 01:06:47

标签: javascript jquery

如果用户位于当前部分的上半部分,则会自动滚动该部分的顶部。

然后,如果用户位于当前部分的下半部分,则会自动滚动到上一部分。

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);
});

http://jsfiddle.net/x6xzh69v/2/

1 个答案:

答案 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;
}