Rectangle 27 0

javascript scrollTop animation without jquery?


<button onclick="scrollToTop(1000);"></button>
function scrollToTop(scrollDuration) {
    var cosParameter = window.scrollY / 2,
        scrollCount = 0,
        oldTimestamp = performance.now();
    function step (newTimestamp) {
        scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp));
        if (scrollCount >= Math.PI) window.scrollTo(0, 0);
        if (window.scrollY === 0) return;
        window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount)));
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
/* 
    Explanations:
    - pi is the length/end point of the cosinus intervall (see above)
    - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire.
      (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
    - newTimestamp - oldTimestamp equals the duration

      a * cos (bx + c) + d                      | c translates along the x axis = 0
    = a * cos (bx) + d                          | d translates along the y axis = 1 -> only positive y values
    = a * cos (bx) + 1                          | a stretches along the y axis = cosParameter = window.scrollY / 2
    = cosParameter + cosParameter * (cos bx)    | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp))
    = cosParameter + cosParameter * (cos scrollCount * x)
*/
function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
        if ( window.scrollY != 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval); 
    },15);
}

2# JavaScript (ease in and out):

For a smoother slide/animation, done with the requestAnimationFrame method.

UPDATE (ease in and out):

  • Duration in milliseconds (1000ms = 1s)
  • Second script uses the cos function. Example curve:

Can I see a JSFIDDLE of this in action? I can't seem to get it to work . . .

Due to the high amount of up-voters, I rechecked my code I wrote a couple of years ago and tried to optimize it. Further more I added a little mathematical explanation at the bottom of my code.

Keep in mind that const is not part of EcmaScript 5, but 6 with different semantics. Currently only Firefox and Chrome support it somehow. Read more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/

Thanks for this! I extended it a bit to allow scrolling to a specific element and a polyfill for browsers without performance.now() ... gist.github.com/joshcanhelp/a3a669df80898d4097a1e2c01dea52c1

Yes true, good object. So using var might be the better option untill all browsers are supporting const.

Note
Rectangle 27 0

javascript scrollTop animation without jquery?


<button onclick="scrollToTop(1000);"></button>
function scrollToTop(scrollDuration) {
    var cosParameter = window.scrollY / 2,
        scrollCount = 0,
        oldTimestamp = performance.now();
    function step (newTimestamp) {
        scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp));
        if (scrollCount >= Math.PI) window.scrollTo(0, 0);
        if (window.scrollY === 0) return;
        window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount)));
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
/* 
    Explanations:
    - pi is the length/end point of the cosinus intervall (see above)
    - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire.
      (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
    - newTimestamp - oldTimestamp equals the duration

      a * cos (bx + c) + d                      | c translates along the x axis = 0
    = a * cos (bx) + d                          | d translates along the y axis = 1 -> only positive y values
    = a * cos (bx) + 1                          | a stretches along the y axis = cosParameter = window.scrollY / 2
    = cosParameter + cosParameter * (cos bx)    | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp))
    = cosParameter + cosParameter * (cos scrollCount * x)
*/
function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
        if ( window.scrollY != 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval); 
    },15);
}

2# JavaScript (ease in and out):

For a smoother slide/animation, done with the requestAnimationFrame method.

UPDATE (ease in and out):

  • Duration in milliseconds (1000ms = 1s)
  • Second script uses the cos function. Example curve:

Can I see a JSFIDDLE of this in action? I can't seem to get it to work . . .

Due to the high amount of up-voters, I rechecked my code I wrote a couple of years ago and tried to optimize it. Further more I added a little mathematical explanation at the bottom of my code.

Keep in mind that const is not part of EcmaScript 5, but 6 with different semantics. Currently only Firefox and Chrome support it somehow. Read more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/

Thanks for this! I extended it a bit to allow scrolling to a specific element and a polyfill for browsers without performance.now() ... gist.github.com/joshcanhelp/a3a669df80898d4097a1e2c01dea52c1

Yes true, good object. So using var might be the better option untill all browsers are supporting const.

Note
Rectangle 27 0

javascript scrollTop animation without jquery?


<button onclick="scrollToTop(1000);"></button>
function scrollToTop(scrollDuration) {
    const   scrollHeight = window.scrollY,
            scrollStep = Math.PI / ( scrollDuration / 15 ),
            cosParameter = scrollHeight / 2;
    var     scrollCount = 0,
            scrollMargin;
    requestAnimationFrame(step);        
    function step () {
        setTimeout(function() {
            if ( window.scrollY != 0 ) {
                    requestAnimationFrame(step);
                scrollCount = scrollCount + 1;  
                scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
                window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
            }
        }, 15 );
    }
}
function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
        if ( window.scrollY != 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval); 
    },15);
}

2# JavaScript (ease in and out):

For a smoother slide/animation, done with the requestAnimationFrame method.

UPDATE (ease in and out):

  • Duration in milliseconds (1000ms = 1s)
  • Second script uses the cos function. Example curve:

Can I see a JSFIDDLE of this in action? I can't seem to get it to work . . .

Keep in mind that const is not part of EcmaScript 5, but 6 with different semantics. Currently only Firefox and Chrome support it somehow. Read more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/

Yes true, good object. So using var might be the better option untill all browsers are supporting const.

Note
Rectangle 27 0

javascript scrollTop animation without jquery?


<button onclick="scrollToTop(1000);"></button>
function scrollToTop(scrollDuration) {
    var cosParameter = window.scrollY / 2,
        scrollCount = 0,
        oldTimestamp = performance.now();
    function step (newTimestamp) {
        scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp));
        if (scrollCount >= Math.PI) window.scrollTo(0, 0);
        if (window.scrollY === 0) return;
        window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount)));
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
/* 
    Explanations:
    - pi is the length/end point of the cosinus intervall (see above)
    - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire.
      (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
    - newTimestamp - oldTimestamp equals the duration

      a * cos (bx + c) + d                      | c translates along the x axis = 0
    = a * cos (bx) + d                          | d translates along the y axis = 1 -> only positive y values
    = a * cos (bx) + 1                          | a stretches along the y axis = cosParameter = window.scrollY / 2
    = cosParameter + cosParameter * (cos bx)    | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp))
    = cosParameter + cosParameter * (cos scrollCount * x)
*/
function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
        if ( window.scrollY != 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval); 
    },15);
}

2# JavaScript (ease in and out):

For a smoother slide/animation, done with the requestAnimationFrame method.

UPDATE (ease in and out):

  • Duration in milliseconds (1000ms = 1s)
  • Second script uses the cos function. Example curve:

Can I see a JSFIDDLE of this in action? I can't seem to get it to work . . .

Due to the high amount of up-voters, I rechecked my code I wrote a couple of years ago and tried to optimize it. Further more I added a little mathematical explanation at the bottom of my code.

Keep in mind that const is not part of EcmaScript 5, but 6 with different semantics. Currently only Firefox and Chrome support it somehow. Read more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/

Thanks for this! I extended it a bit to allow scrolling to a specific element and a polyfill for browsers without performance.now() ... gist.github.com/joshcanhelp/a3a669df80898d4097a1e2c01dea52c1

Yes true, good object. So using var might be the better option untill all browsers are supporting const.

Note