アニメーションをスクロールする

Question

どのようにイージング/アニメーション/ゆっくりとこの機能に移動できますか？ 今はちょうどジャンプします。 これで、アニメーションを含む「アンカー」に移動する必要があります。

<script type='text/javascript'> 
     setTimeout("window.scrollBy(0,270);",3000); 
</script> 

Answer 1

はそれを自分自身を得ました。ワードプレスとjquery.noConflictモードのため、私はコードを変更する必要がありません。

<script type="text/javascript"> 
     (function($){ 
     $(document).ready(function(){ 
      setTimeout(function() { 
      $('body').scrollTo('300px', 2500); 
     }, 3000); 
     }); 
     }(jQuery)); 
</script> 

皆様ありがとうございます！リクエストアニメーションフレームを使用して、プレーンJavaScriptを使用しても可能

Answer 2

jQueryを使用すると、これはスクロールプラグインを使用した方がはるかに簡単です。 http://flesler.blogspot.se/2007/10/jqueryscrollto.html

は、このような解決策を考えてみましょう：もちろん

<script type='text/javascript' src='js/jquery.1.7.2.min.js'></script> 
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script> 
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script><!-- only for other easings than swing or linear --> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    setTimeout(function() { 
    $('html,body').scrollTo({top:'30%', left:'0px'}, 800, {easing:'easeInBounce'}); 
}, 3000); 
}); 
</script> 

スクリプトをDLにする必要があります。 jQueryを使用している場合

が

Answer 3

取り組ん例えばhttp://jsfiddle.net/7bFAF/2/を参照してください、あなたは簡単に.animate機能を使用することができます。 jQueryを使って

Here's an example on how it should work.

Answer 4

別の例として、いくつかの素晴らしい効果を緩和プラグインを使用しています。

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

Answer 5

は...

// first add raf shim 
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      function(callback){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 

// main function 
function scrollToY(scrollTargetY, speed, easing) { 
    // scrollTargetY: the target scrollY property of the window 
    // speed: time in pixels per second 
    // easing: easing equation to use 

    var scrollY = window.scrollY, 
     scrollTargetY = scrollTargetY || 0, 
     speed = speed || 2000, 
     easing = easing || 'easeOutSine', 
     currentTime = 0; 

    // min time .1, max time .8 seconds 
    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY)/speed, .8)); 

    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js 
    var PI_D2 = Math.PI/2, 
     easingEquations = { 
      easeOutSine: function (pos) { 
       return Math.sin(pos * (Math.PI/2)); 
      }, 
      easeInOutSine: function (pos) { 
       return (-0.5 * (Math.cos(Math.PI * pos) - 1)); 
      }, 
      easeInOutQuint: function (pos) { 
       if ((pos /= 0.5) < 1) { 
        return 0.5 * Math.pow(pos, 5); 
       } 
       return 0.5 * (Math.pow((pos - 2), 5) + 2); 
      } 
     }; 

    // add animation loop 
    function tick() { 
     currentTime += 1/60; 

     var p = currentTime/time; 
     var t = easingEquations[easing](p); 

     if (p < 1) { 
      requestAnimFrame(tick); 

      window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t)); 
     } else { 
      console.log('scroll done'); 
      window.scrollTo(0, scrollTargetY); 
     } 
    } 

    // call it once to get started 
    tick(); 
} 

// scroll it! 
scrollToY(0, 1500, 'easeInOutQuint'); 

Answer 6

this answerから適応：

function scrollBy(distance, duration) { 

    var initialY = document.body.scrollTop; 
    var y = initialY + distance; 
    var baseY = (initialY + y) * 0.5; 
    var difference = initialY - baseY; 
    var startTime = performance.now(); 

    function step() { 
     var normalizedTime = (performance.now() - startTime)/duration; 
     if (normalizedTime > 1) normalizedTime = 1; 

     window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI)); 
     if (normalizedTime < 1) window.requestAnimationFrame(step); 
    } 
    window.requestAnimationFrame(step); 
} 

これは、あなたがスムーズに指定した距離でスクロールできるようにする必要があります。

Answer 7

使用本とあなたの問題は、** ** `たsetInterval（）`や `のsetTimeout（）`に文字列を渡すことはありません

animate(document.documentElement, 'scrollTop', 0, 200); 

おかげ