Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
In my html I have an anchor link in the form of a button:
HTML
<button><a href="#content">Go To Content</a></button>

which links to my #content div. Unfortunately the jump to the #content div is very sudden and harsh. So I tried animating it with Java Script by using the window.scrollTo() method ( And yes, I want to do this with ONLY pure java script, not even JQuery).

To do this I want to separate the whole scroll motion into smaller parts; making each one take a little bit longer than the one before it, to achieve the kind of animation you get with ease in css.

So far, you'll find my JS in the code. The code runs on click for testing purposes.

The issue with this is in the for loop in the smoothScroll function. It seems that the for loop executes the scroll command only once and then ignores it.

If you want a specific question: Does the window.scroll function run only once? Is it's speed limited someway in comparison to the speed of the browser? Should there be a better way of doing what I described above?

I'm developing this website with google chrome and ONLY pure Java Script, windows 10.

I won't post my html so the question doesn't get too long. If you want me to, please comment so.

EDIT:
@
Sinisa Hajnal 
has a point. The loop just adds up the scrolling and performs it at the end. So if I have the loop run 8 times and scroll 10 pixels each time, it wouldn't do it individually, it would just scroll once.

Does anyone know how to stop this?

What I have tried:

JavaScript
function smoothScroll(){
  for (i = 0; i < 80; i+=10 ){
        sleep(10)
        window.scrollTo(0, i)
    }
 }
// here we run our function when the user clicks on the webpage
window.onclick = function(){
    smoothScroll()
}
Posted
Updated 19-Nov-17 8:17am
v4
Comments
Sinisa Hajnal 17-Nov-17 11:22am    
It looks like it executes it once, but it actually runs 8 times. It is just that it does the same thing (scrollTo (0, 1); scrollTo(0,2) etc..maybe it's too fast or the step is too small. Try using scrollamount variable in the loop instead of 8

Add console.log ("loop: " +i); after sleep just to see it runs properly.
Member 13525602 18-Nov-17 9:00am    
it seems you're right. when i added console.log, the alert came up 8 times. It's just adding up all the scrolls and executing one big scroll at the end. So if i had it scroll 10 pixels each loop and the loop scrolls 8 times, it just scrolls 80 at the end.

1 solution

It is a bit more complicated, than a simple loop (remember JS is single threaded by nature)...
How to Implement Smooth Scrolling in Vanilla JavaScript — SitePoint[^]
 
Share this answer
 
Comments
Member 13525602 26-Nov-17 6:20am    
This is actually a great solution. I didn't mention that i don't want to use libraries either, but this gave me a good starting point. Thanks!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900