Javascript scroll to div

Question

我有兩個問題，我現在正在摔跤。我試圖用JavaScript跳轉到頁面上的ID（我喜歡JS給出的慢動畫）。雖然我使用的JavaScript雖然不工作。這裏有一個JS撥弄着什麼我工作：

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

下面是代碼（抱歉長HTML，但不得不使用它的測試滾動）：

HTML：

<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> 

的Javascript：

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

任何幫助將大大APPR eciated

Answer 1

這是因爲您沒有在JSFiddle中加載jQuery。它位於框架&擴展的左上角。

Answer 2

我使用這個腳本來完成你的工作，現在代碼不匹配你的類名，所以你不得不改變它們，但是這將滾動到底部，然後順利地返回頂部。 更多信息，請參見Jsfiddle

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

Answer 3

這裏'山JavaScript函數，可能會有所幫助：

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; 
     }; 
    }());