Viral,
суть первой ссылке была показать как в общем ее делать, и после прочтения можно догадаться.
Я к тому что используйте функцию animate которая дается в примере
http://learn.javascript.ru/js-animation#итого
Насчет вашего когда, зачем очищать если таймера еще нет
var spx = document.body.scrollTop;
var fpx = getOffset(anchor); //тут отдельная функция возвращает позицию элемента относительно начала документа
clearInterval(scroll);//я вроде и сбрасываю setInterval - а все равно какая-то лажа получается
А теперь представьте у вас есть 2 функции (А и Б) и у каждой есть таймер, мы запустили функцию А и функцию Б , до того как отработал таймер из А, получается что работает таймер из А и Б.
А в общем вот более правильное решение
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<script>
var toElem;
for(var i = 0; i < 1000; i++){
document.write(i+'<br>');
if(i == 700)
document.write('<div id="scroll"> to me</div>');
}
toElem = document.getElementById('scroll');
document.body.addEventListener('click', function () {
var coords = toElem.getBoundingClientRect()
AnimateScroll(coords.top, 100);
});
(function () {
var isAnimate;
window.AnimateScroll = function (y, step) {
var offset = 0;
if(isAnimate)
return;
isAnimate = true;
(function animate() {
if(offset >= y){
offset = y;
isAnimate = false;
}
window.scrollTo(0, offset);
console.log(offset);
offset += step;
if(isAnimate)
setTimeout(animate, 40);
}())
}
}());
</script>
</body>
</html>
а дальше можете расширить, допустим если уже идет анимация, то записывать следующие вызовы в очередь пока не закончиться анимация,
очередь - это массив который содержит объект со свойствами x and step (в данном случае)