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