를 automaticly scrollTo 가장 가까운 사업부의 jQuery를/자바 스크립트

Question

좋아 사람들이 나를 너무 베어 힘든 ..

내가 4 DIV 년대에 한 페이지 ScrollTo 웹 사이트를 짓고 있어요입니다. 이 div는 내 페이지를 나타냅니다.

홈 -> 내 작품 -> 내 소개 -> 연락처

너비와 높이는 bodyload에서 사용자 화면 해상도를 읽거나 크기를 조정하는 작은 자바 스크립트로 정의됩니다. div는 항상 사용자 화면의 너비와 높이입니다.

function resize() { 

    document.getElementById("home").style.height = viewportheight+"px"; 
    document.getElementById("work").style.height = viewportheight+"px"; 
    document.getElementById("about").style.height = viewportheight+"px"; 
    document.getElementById("contact").style.height = viewportheight+"px"; 

내가 달성하기 위해 노력하고있어 사용자가 스크롤하면 (의 아래 또는 최대 100 픽셀을 가정 해 봅시다)이다
는 윈도우를 automaticly 가장 가까운 사업부의 상단에 스냅됩니다. 같은

뭔가 : 사전에

onScroll("100px") up or down { scrollTo("closest #div") }; 

감사합니다.

편집 : 답변을 찾았습니다!

stelarjs라는 플러그인이 있는데, 가로 대신 세로로 스크롤하도록 수정되었습니다. ... 예를 들어,

//OnScroll: 
$(window).scroll(function(){ 
    //Get current scoll position: 
    var iSrollT = $(document).scrollTop(); 
    //Get the position of your element: 
    var iOffT = $('#home').offset().top; 
}); 

//Set scroll top using an animation: 
$('html, body').animate({  
    scrollTop: iOffT 
}, 300); 

하지만 당신은 더 구현해야합니다 : 내가 찾던 바로 효과를 얻었다 : 당신이 여기에서 시작하는 데 사용할 수있는

var STELLARJS = { 
init: function() { 
    var self = this; 
    $(function(){ 
     self.$sections = $('#landing_page, #work, #about, #contact').each(function(index){ 
      $(this).data('sectionIndex', index); 
     }); 

     self.handleEvents(); 

    }); 
}, 
handleEvents: function() { 
    var self = this, 
     //Debounce function from Underscore.js 
     debounce = function(func, wait) { 
      var timeout; 
      return function() { 
       var context = this, args = arguments; 
       var later = function() { 
        timeout = null; 
        func.apply(context, args); 
       }; 
       clearTimeout(timeout); 
       timeout = setTimeout(later, wait); 
      } 
     }, 
     handleScroll = function() { 
      var scrollTop = $(window).scrollTop(), 
       sectionIndex = Math.round((scrollTop)/self.$sections.first().outerHeight()), 
       $activeSection = self.$sections.eq(sectionIndex); 

      if ($activeSection.length === 0) { 
       $activeSection = self.$sections.last(); 
      } 

      if ($activeSection.length === 0) return; 

      $(window).unbind('scroll.stellarsite'); 

      if (scrollTop === 0) { 
       $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); 
      } else { 
       $('html,body').animate({ 
        scrollTop: $activeSection.offset().top 
       }, 600, 'easeInOutExpo', function() { 
        setTimeout(function(){ 
         $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); 
        }, 10); 
       }); 
      } 

      $(window).bind('mousewheel', function(){ 
       $('html,body').stop(true, true); 
      }); 

      $(document).bind('keydown', function(e){ 
       var key = e.which; 

       if (key === 37 || key === 39) { 
        $('html,body').stop(true, true); 
       } 
      }); 
     }; 

    if (window.location.href.indexOf('#show-offset-parents-default') === -1) { 
     $(window).bind('scroll.stellarsite', debounce(handleScroll, 500)); 
    } 
} }); 

Answer 1

var STELLARJS = { 
init: function() { 
    var self = this; 
    $(function(){ 
     self.$sections = $('#landing_page, #work, #about, #contact').each(function(index){ 
      $(this).data('sectionIndex', index); 
     }); 

     self.handleEvents(); 

    }); 
}, 
handleEvents: function() { 
    var self = this, 
     //Debounce function from Underscore.js 
     debounce = function(func, wait) { 
      var timeout; 
      return function() { 
       var context = this, args = arguments; 
       var later = function() { 
        timeout = null; 
        func.apply(context, args); 
       }; 
       clearTimeout(timeout); 
       timeout = setTimeout(later, wait); 
      } 
     }, 
     handleScroll = function() { 
      var scrollTop = $(window).scrollTop(), 
       sectionIndex = Math.round((scrollTop)/self.$sections.first().outerHeight()), 
       $activeSection = self.$sections.eq(sectionIndex); 

      if ($activeSection.length === 0) { 
       $activeSection = self.$sections.last(); 
      } 

      if ($activeSection.length === 0) return; 

      $(window).unbind('scroll.stellarsite'); 

      if (scrollTop === 0) { 
       $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); 
      } else { 
       $('html,body').animate({ 
        scrollTop: $activeSection.offset().top 
       }, 600, 'easeInOutExpo', function() { 
        setTimeout(function(){ 
         $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); 
        }, 10); 
       }); 
      } 

      $(window).bind('mousewheel', function(){ 
       $('html,body').stop(true, true); 
      }); 

      $(document).bind('keydown', function(e){ 
       var key = e.which; 

       if (key === 37 || key === 39) { 
        $('html,body').stop(true, true); 
       } 
      }); 
     }; 

    if (window.location.href.indexOf('#show-offset-parents-default') === -1) { 
     $(window).bind('scroll.stellarsite', debounce(handleScroll, 500)); 
    } 
} }); 

Answer 2

방법은 scoll 위치가 항상 다음 div로 스냅되는 것을 방지하고 scolling은 더 이상 가능하지 않습니다.