JAVASCRIPT ONLY (no jquery) animated scrollTop in div

Question

I am trying to animate a "scroll-to-top" button for a div with overflow set to auto (scrollbars are displayed as overflow exceeds div limits, so this is not an issue). On clicking the button i call a for loop in a javascript (not jquery) function. Each descending increment of the for loop (starting at the current element.scrollTop position) is to gradually back the scrolling down until element.scrollTop is 0. Very simple and straightforward in theory. Works like a dream in IE (very atypical!) but DOES NOT WORK in Firefox or Chrome!!!! All it does is JUMPS to the top...no smooth gradual scrolling upward which is what i want! Please help!

javascript:

function scrollUp(d){
var s=document.getElementById(d).scrollTop;
for (x=s; x>0; x=x-1){document.getElementById(d).scrollTop=x;}
}

html:

<div id="this_div" class="container">
<div id="top" class="topbutton" onClick="scrollUp('this_div');">Top</div>
</div>

Kevin Karl Leaño · Accepted Answer · 2015-01-31 06:49:24Z

1

you can use timer for animating that

window.onload = function() {
    document.getElementById('top').onclick = function() {
       scrollUp('this_div');  
    };
};

function scrollUp(d){
    var s = document.getElementById(d).scrollTop;
    var scrollDistance = 10;
    var scrollSpeed = 200; // 1000 = 1 seconds

    var scrollAnimate = setInterval(function() {
       if (s > 0) {
            s -= scrollDistance;
            document.getElementById(d).scrollTop = s;
       } else {
          clearInterval(scrollAnimate);
       } 
    },scrollSpeed);
}

you can now manipulate the speed and the distance of scrolling by just changing the value of scrollDistance and scrollSpeed.

edited Jan 31, 2015 at 6:49

answered Jan 31, 2015 at 6:04

Kevin Karl Leaño

1,7743 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bob Over a year ago

While your answer does in fact work, (thank you), it seems that maybe I am missing a "bug" with firefox/chrome, and this is what I really want to find a way to work around. This method seems to kind of be a "duct tape over the hole" method. Please don't mistake me for being ungrateful.

Kevin Karl Leaño Over a year ago

i edited the code i added something now and remove the inline onclick = scrollUp('this_div') in your div. its not realiable sometimes. try it

Bob Over a year ago

The function is triggering - already debugged that. In FF and Chrome it isn't "smoothly" scrolling up the page to the top, just jumping, just like a regular anchor link would do. IE does it fine.

Kevin Karl Leaño Over a year ago

did you already use a reset.css? not all browser has same compatibilities in css. maybe that would help.

Bob Over a year ago

Anyone???? I've seen quesions a lot dumber than this receive more than one answer.

Collectives™ on Stack Overflow

JAVASCRIPT ONLY (no jquery) animated scrollTop in div

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related