ScrollTo with animation

Question

how can i add an easing/animation/slowly moving to this function? At the moment it just jumps. Now it should move to the "anchor" with an animation.

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

Answer 1

This will Work, Assume you need to Smooth-scrolls to the top of the page.

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

Answer 2

Adapted from 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);
}

This should allow you to smoothly scroll by the specified distance.

Answer 3

Another example with jQuery, uses the easing plugin for some nice effects:

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

Answer 4

got it myself. because of wordpress and the jquery.noConflict Mode i hade to modify the code:

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

thanks for everybody!!!

Answer 5

For anyone viewing this question in 2019: this can now be done natively by using

window.scrollBy({
    top: 0,
    left: 270,
    behavior: 'smooth'
});

This works in all major browsers except edge and safari. See https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy#Examples

Answer 6

Using jQuery makes this much easier, perhaps with the scrollto plugin. http://flesler.blogspot.se/2007/10/jqueryscrollto.html

Consider a solution such:

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

Of course you need to dl the scripts.

See http://jsfiddle.net/7bFAF/2/ for a working example