2013-05-13 13 views
1

나는이 순간에 내가 씨름하고있는 두 가지 문제가있다. 나는 자바 스크립트를 사용하여 페이지의 ID로 이동하려고합니다. (나는 느린 애니메이션 JS가주는 것을 좋아합니다.) 비록 내가 사용하고있는 자바 스크립트가 작동하지 않습니다.div 로의 JavaScript 스크롤

여기 http://jsfiddle.net/n6H8v/5/

코드입니다 (긴 HTML에 대한 미안하지만, 스크롤 테스트를 위해 그것을 사용했다) :

HTML :

을 여기에 내가 작업하고있는 무슨과 JS 바이올린입니다
<section id="thumbs-work"> 

    <img id="top-cat" src="images/cat.png"> 

     <p> /* Large amount of text to force scrolling */ </p> 
</section> 


    <div class="back-to-top back-to-top-left"> 
     <p><a> 
     <span class="top-jump">BACK TO TOP</span><img src="images/cat.png" alt="back to top"></a></p> 
    </div> 

</div> 

자바 스크립트 :

$(document).ready(function() { 
     $(".top-jump").click(function() { 
       $("html, body").animate({ scrollTop: $("#top-cat").offset().top }, 1000); 
       return true; 
     }); 
}); 

어떤 도움이 크게 appr 것 ec

+1

사용이 http://jsfiddle.net/xAbpf/ – PSL

+0

나는 스크롤 자바 스크립트를 사용하여에 추천 할 것입니다 페이지 ... 브라우저의 기본 제공 링크 시스템을 사용하여 ID 또는 앵커 태그로 리디렉션됩니다. 페이지 스크롤에 애니메이션을 적용하면 아무 것도 추가되지 않고 사용자의 시간이 소비됩니다. – benastan

답변

1

JSFiddle에서 jQuery를로드하지 않았기 때문입니다. 왼쪽 상단의 프레임 워크 & 확장입니다.

0

이 스크립트를 사용하여 수행중인 작업을 완료했습니다. 이제 코드가 클래스 이름과 일치하지 않아 변경해야하지만 코드가 맨 아래로 부드럽게 다시 스크롤됩니다. 대한 추가 정보를 원하시면 Jsfiddle를 참조

$('a').click(function(){ 
    $('html, body').animate({ 
    scrollTop: $($(this).attr('href')).offset().top 
}, 1500); 
    return false; 
}); 
0

Here'sa 자바 스크립트 도움이 될 수 있습니다 기능 :

window.smoothScrollTo = (function() { 
    var timer, start, factor; 

    return function (target, duration) { 
    var offset = window.pageYOffset, 
     delta = target - window.pageYOffset; // Y-offset difference 
    duration = duration || 500;    // default 1 sec animation 
    start = Date.now();      // get start time 
    factor = 0; 

    if(timer) { 
     clearInterval(timer); // stop any running animations 
    } 

     function step() { 
      var y; 
      factor = (Date.now() - start)/duration; // get interpolation factor 
      if(factor >= 1) { 
      clearInterval(timer); // stop animation 
      factor = 1;   // clip to max 1.0 
      } 
      y = factor * delta + offset; 
      window.scrollBy(0, y - window.pageYOffset); 
     } 

     timer = setInterval(step, 10); 
     //document.getElementById("but").click(); 
     return timer; 
     }; 
    }());