Help with this example to make a smooth scroller up!

<style> .wrap { margin: 0 auto; width: 400px; border: 1px solid #DDDDDD; border-radius: 4px; padding: 50px; } .mini { width: 100%; height: 400px; border: 1px solid #333333; background: #eee; overflow: auto; } </style> <div class="wrap"> <div class="mini"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <a href="#top">Наверх</a> </div> </div>

    1 answer 1

    On pure JS ( http://jsfiddle.net/QvE97/1/ ):

     <div class="wrap"> <div class="mini" id="mini"> ... </div> </div> function scrollTo(element, to, duration) { if(typeof element == 'String') element = document.getElementById(element); if (duration < 0) return; var difference = to - element.scrollTop; var perTick = difference / duration * 10; setTimeout(function() { element.scrollTop = element.scrollTop + perTick; scrollTo(element, to, duration - 10); }, 10); } var lnk = document.getElementById('lnkToTop'); var mini = document.getElementById('mini'); lnk.onclick = function() { scrollTo(mini, 0, 300) }

    With jQuery ( http://jsfiddle.net/QvE97/ ):

     <div class="wrap"> <div class="mini" id="mini"> ... </div> </div> $(function() { $('#lnkToTop').click(function() { $('.mini').animate({ scrollTop: 0 }, 300); return false; }); });
    • not at all :) - Pavel Azanov