jQuery从元素滚动到元素到页面滚动元素和因素

Question

我想要制作一个固定的导航，让您在页面上的元素之间滚动，并保持你在页面上的位置。我见过几个例子，我稍微修改了一些例子，但一直没有能够正常工作。当我在上一个/下一个按钮之间切换时，我的最新尝试可以正常工作，但是我想要考虑用户在页面上的位置。例如，如果我点击下一个按钮两次，则计数设置为2，并将我带到页面上的第二部分。然后，如果我点击一次前一个按钮，则计数设置为1，并且将我带到页面上的第一部分。现在，如果我向页面中间滚动（使用浏览器滚动条），然后点击下一个按钮，则计数设置为3，并将其带到页面的第二部分。我需要它，以便它将我带到页面上的下一个可见部分。我需要一种方法来检测用户当前在哪个部分，并将其与我的逻辑相关联，以便有人可以使用其滚动条或此固定导航在页面中进行无缝导航。我怎样才能做到这一点？

JS小提琴：http://jsfiddle.net/picitelli/fCLKm/

JS

function scrollTo(el) { 

    $('html,body').animate({ 
     scrollTop: $(el).offset().top 
    }, 500); 

} 

var scroller = $('.scroller'), 
    scrollNext = scroller.find('.next'), 
    scrollPrev = scroller.find('.prev'), 
    count = 0, 
    sectionCounter = $('.section').length; 

scrollNext.on("click", function() { 

    if (count < sectionCounter && count !== sectionCounter) { 
     count++; 
     scrollTo('.section:eq(' + count + ')'); 
    } else { 
     // do nothing 
    } 

    console.log(count); 

}); 

scrollPrev.on("click", function() { 

    if (count > 0) { 
     count--; 
     scrollTo('.section:eq(' + count + ')'); 
    } else { 
     // do nothing 
    } 

    console.log(count); 
}); 

HTML

<div class="scroller"> 
    <span class="prev">Previous</span> 
    <span class="next">Next</span> 
</div> 

<div class="content">Lorem ipsum some content...</div> 

<div class="section">A</div> 
<div class="section">B</div> 
<div class="section">C</div> 
<div class="section">D</div> 
<div class="section">E</div> 
<div class="section">F</div> 
<div class="section">G</div> 
<div class="section">H</div> 
<div class="section">I</div> 
<div class="section">J</div> 
<div class="section">K</div> 

CSS

.content { 
    padding: 20px; 
} 
.section { 
    background: #f2f2f2; 
    height: 400px; 
    padding: 20px; 
} 
.section:nth-child(even) { 
    background: #ccc; 
} 
.scroller { 
    position: fixed; 
    right: 20px; 
    top: 20px; 
} 
.scroller span { 
    background: #fff; 
    color: #666; 
    cursor: pointer; 
    display: block; 
    font-size: 14px; 
    padding: 5px; 
    text-align: center; 
    width: 50px; 
} 
.scroller span:hover { 
    color: #000; 
} 
.scroller span.prev { 
    margin-bottom: 2px; 
} 

任何反馈/方向将不胜感激。

Answer 1

好吧，我想我想通了。

JS小提琴：http://jsfiddle.net/picitelli/Tfbb3/

新的JS

function scrollTo(el) { 

    $('html,body').animate({ 
    scrollTop: $(el).offset().top 
    }, 500); 

} 

var scroller = $('.scroller'), 
    scrollPrev = scroller.find('.prev'), 
    scrollNext = scroller.find('.next'), 
    section = $('.section'), 
    position = -1; 

// add data count to each section 
section.each(function(index) { 

    $(this).attr('data-count', index); 

}); 

// next click through scrolling 
scrollNext.on('click', function() { 

    if (position < section.length - 1) { 

     position++; 

     scrollTo(section[position]); 

    } 

}); 

// prev click through scrolling 
scrollPrev.on('click', function() { 

    if (position > 0) { 

     position--; 

     scrollTo(section[position]); 

    } 

}); 

// page scroll position detection 
$(window).scroll(function() { 

    var currentPosition = $(this).scrollTop(); 

    section.each(function() { 

     var top = $(this).offset().top, 
      bottom = top + $(this).height(); 

     if(currentPosition >= top && currentPosition <= bottom) { 

      var sectionCount = $(this).attr('data-count'); 

      position = sectionCount; 

     } 

    }); 

}); 

Answer 2

我想不是保持一个计数，而是在没有任何部分位于窗口顶部位置的完美位置时，滚动到最靠近窗口顶部位置的最近部分。如果是，请滚动到上面或下面的部分。看看这个How to find the closest element to the current position with jQuery