ScrollTo con animazione

Question

Come posso aggiungere un andamento/animazione/spostamento lento a questa funzione? Al momento salta semplicemente. Ora dovrebbe passare all'ancora con un'animazione.

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

Answer 1

got me stesso. a causa delle modalità di wordpress e il jquery.noConflict ho hade di modificare il codice:

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

grazie per tutti !!!

Answer 2

L'utilizzo di jQuery rende tutto molto più semplice, forse con il plugin scrollto. http://flesler.blogspot.se/2007/10/jqueryscrollto.html

in considerazione una soluzione del genere:

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

Naturalmente è necessario dl gli script.

Vedi http://jsfiddle.net/7bFAF/2/ per un esempio di lavoro

Answer 3

Quando si utilizza jQuery, è possibile utilizzare facilmente la funzione .animate.

Here's an example on how it should work.

Answer 4

Un altro esempio con jQuery, usa il plugin di andamento alcuni effetti piacevoli:

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

Answer 5

possibile anche con javascript pianura con richiesta di frame di animazione ..

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

Adattato da 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); 
} 

Ciò dovrebbe consentire di scorrere senza problemi dalla distanza specificata.

Answer 7

Utilizzare questo e il tuo problema sarà risolto

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

Grazie