플러그인 없이 원페이지 메뉴 스크롤하기

<div class="wrap">
  <div id="top_menu">		
    <div id="logo">
      <a href="#home"><img src="img/logoPaper.png" alt="Paper" /></a>
    </div>
    <ul>
      <li class="on"><a href="#paper">paper</a></li>
      <li><a href="#works">works</a></li>
      <li><a href="#email">email</a></li>
    </ul>
  </div>
  <div id="contents">
    <div id="paper"><img src="img/paper.jpg" alt="paper" /></div>
    <div id="works"><img src="img/work.jpg" alt="works" /></div>
    <div id="email"><img src="img/email.jpg" alt="email" /></div>
  </div>
</div>

 

$(function(){
  var menu = $('#top_menu > ul > li');
  var contents = $('#contents > div');
  
  menu.click(function(e){
      e.preventDefault();
      var tg = $(this);
      var i = tg.index();
      var section = contents.eq(i);
      var tt = section.offset().top;
      $('html, body').stop().animate({scrollTop:tt});
  });
  
    $(window).scroll(function(){
      var sctop = $(window).scrollTop();
      contents.each(function(){
        var tg = $(this);
        var i = tg.index();
        if(tg.offset().top <= sctop + 50){ // 여유분50
            menu.removeClass('on');
            menu.eq(i).addClass('on');
        }
    });
  });
});