एनीमेशन के साथ स्क्रॉल करने के लिए

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> 

सभी के लिए धन्यवाद !!!

Answer 2

jQuery का उपयोग करना स्क्रूटो प्लगइन के साथ शायद यह अधिक आसान बनाता है।

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

बेशक

आप स्क्रिप्ट डीएल की जरूरत है: http://flesler.blogspot.se/2007/10/jqueryscrollto.html

एक समाधान इस तरह के विचार करें। जब jQuery का उपयोग कर

एक काम उदाहरण

Answer 3

के लिए http://jsfiddle.net/7bFAF/2/ देखें, तो आप आसानी .animate समारोह इस्तेमाल कर सकते हैं।

Here's an example on how it should work.

Answer 4

jQuery के साथ एक और उदाहरण है, कुछ अच्छा प्रभाव के लिए आसान प्लगइन का उपयोग करता है:

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

उपयोग इस और आपकी समस्या हल हो जाएगा

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

धन्यवाद