In my html I have an anchor link in the form of a button:
<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:
function smoothScroll(){
for (i = 0; i < 80; i+=10 ){
sleep(10)
window.scrollTo(0, i)
}
}
window.onclick = function(){
smoothScroll()
}