D4mations.com

Smooth Auto Scroll Animation Tutorial JavaScript HTML CSS Programming



Lesson Code: http://www.developphp.com/video/JavaScript/Smooth-Auto-Scroll-Tutorial
In this JavaScript programming lesson we are going to scratch program smooth auto scrolling effects on your web pages. After we discuss the core programming that makes the magic happen, we show how to externalize and reuse your scripted creation.

Original source

d4mer

, , , , , , , , , , , , , , , , , , ,

37 responses to “Smooth Auto Scroll Animation Tutorial JavaScript HTML CSS Programming”

  16. Why didnt work 🙁

    This is my button;
    <a href="#" onclick="return false;" onmousedown="autoScrollTo('hakkimizda');">Hakkımızda</a>

    And i want to going this;
    <div id="hakkimizda"> content </div>

    But didnt work.
    I click my button but nothing happens.

    I use ur code in my head tag.

    var scrollY = 0;
    var distance = 40;
    var speed = 24;
    function autoScrollTo(el) {
    var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var bodyHeight = document.body.offsetHeight;
    var yPos = currentY + window.innerHeight;
    var animator = setTimeout('autoScrollTo(''+el+'')',24);
    if(yPos > bodyHeight){
    clearTimeout(animator);
    } else {
    if(currentY < targetY-distance){
    scrollY = currentY+distance;
    window.scroll(0, scrollY);
    } else {
    clearTimeout(animator);
    }
    }
    }

    Pls help me and thx for this video.

  20. Thank you. But one thing. Sorry to say. The tutorial didn't work AT ALL. The video just confused me for over 30 minutes straight trying to figure it out. God bless that website you put. I figured it out after 2 minutes then. Anyways good tutorial

  24. hi, thanks for this video! very helpfull, …since it's been published, has there been new or better ways to do this? mostly interested in javascript-only functions like this, thanks

  25. Hi Adam, first, I must say that i'm enjoying to follow your great tutorials, that's like breasfeeding javascript knowledge!

    I was not understanding how you was using your setTimeout function so I tried to figure out how to make this script work. It seem to work good, but I'm wondering if you consider this good or bad coding? Maybe, in that case, I wouldn't need the clearTimeout function, but I'm not sure.

    Here is the code of the 2 functions(+ document.getElementById function shortcut):

    function _(el)
    {
    return document.getElementById(el);
    }

    var scrollY = 0;
    var distance = 40;
    var speed = 24;
    function autoScrollTo(el)
    {
    var currentY = window.pageYOffset;
    var targetY = _(el).offsetTop;
    var bodyHeight = document.body.offsetHeight;
    var yPos = currentY + window.innerHeight;
    if (yPos > bodyHeight)
    {
    clearTimeout(animator);
    }
    else
    {
    if (currentY < targetY)
    {
    scrollY = currentY + distance;
    window.scroll(0, scrollY);
    var animator = setTimeout (function() {autoScrollTo(el);},24);
    }
    else
    {
    clearTimeout(animator);
    }
    }
    }

    function resetScroller(el)
    {
    var currentY = window.pageYOffset;
    var targetY = _(el).offsetTop;
    if (currentY > targetY)
    {
    scroll(0, currentY-distance);
    var animator = setTimeout(function() {resetScroller(el);},speed);
    }
    else
    clearTimeout(animator);
    }

  30. Ótima aula 🙂
    Parabéns pelo conteúdo, eu tive que pesquisa um conteúdo em outro língua ( no caso o inglês ) e acabei achando o seu canal do youtube, na minha língua não existe nenhum conteúdo sobre isso em JavaScript puro, mas como não entendo nada inglês (no caso da vídeo aula), eu ainda estou "traduzindo" o seu código com alguns colegas. Obrigado

  32. There is a bug in this code. If we click go back to top then it takes us to the top but prevents us to scroll further below. Quick fix to this

    function resetScroller(el){
    var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var animator = setTimeout('resetScroller(''+el+'')',speed);
    if(currentY > targetY){
    scrollY = currentY-distance;
    window.scroll(0, scrollY);
    } else {
    clearTimeout(animator);
    }
    // need to clear the time out when it reaches to the top
    if (scrollY == 0) {
    clearTimeout(animator);
    }
    }

  35. Hey! Adam! I have a fixed navbar, so the nav links are always on top of my website, but I was wondering how I can edit the code so they automatically reset the scroller, without pressing a second link to scroll up and reset

Leave a Reply