I wrote a script to scroll pages when menu buttons are clicked, similar effect like: http://css-tricks.com/examples/SmoothPageScroll
var m1 = document.getElementById('m1'),
m2 = document.getElementById('m2'),
m3 = document.getElementById('m3'),
m4 = document.getElementById('m4'),
m5 = document.getElementById('m5'),
m2PositionY = document.getElementById('id2').offsetTop,
m3PositionY = document.getElementById('id3').offsetTop,
doneValue = true,
windowPageYOffset = 0;
function Scroll(ScrollValue1) {
windowPageYOffset = window.pageYOffset;
if(windowPageYOffset == ScrollValue1) {
doneValue = true;
}
// scroll up
else if(windowPageYOffset >= ScrollValue1) {
window.scrollBy(0, -(1 + ((windowPageYOffset - ScrollValue1) / 10)));
}
// scroll down
else {
window.scrollBy(0, 1 + ((ScrollValue1 - windowPageYOffset) / 10));
}
if(windowPageYOffset != ScrollValue1) {
var setTimeoutScrollValue1 = setTimeout('Scroll(' + ScrollValue1 + ')', 20);
}
}
function doneOrNot(doneOrNotValue1) {
if(doneValue && doneOrNotValue1 != windowPageYOffset) {
Scroll(doneOrNotValue1);
doneValue = false;
}
}
m1.onclick = function () {
doneOrNot(0); // no need for a id since top is allways 0
}
m2.onclick = function () {
doneOrNot(m2PositionY);
}
m3.onclick = function () {
doneOrNot(m3PositionY);
}
I am using a "true or false variable" (doneValue
) to determine if previous Scroll
is finished before next can start. I wonder if there is any better method to do this in JavaScript?
Please give other feedback if you have any :)