Scroll Automation Wont Stop on Last Link

Question

У меня есть функция javascript, которая работает неправильно. Он отлично работает для всех ссылок, кроме последнего. Когда эта ссылка активирована, она прокручивается вниз, а затем не позволяет вам прокручивать вверх ... несмотря на все мои усилия.

Возможно, мой подход совершенно неправ.

Вот разметка:

<nav> 
    <ul> 

     <li> 
     <a id="home" href="#" onclick="return false">home</a> 
     </li> 

     <li> 
     <a id="services" href="#" onclick="return false">services</a> 
     </li> 

     <li> 
     <a id="portfoliolink" href="#" onclick="return false">portfolio</a> 
     </li> 

     <li> 
     <a id="contactlink" href="#" onclick="return false">contact</a> 
     </li> 

    </ul> 

    </nav> 

И JavaScript:

function smoothScroll(){ 
    if (window.addEventListener){ 
    document.getElementById('home').addEventListener("click", scrollToHome, false); 
    document.getElementById('services').addEventListener("click", scrollToServices, false); 
    document.getElementById('portfoliolink').addEventListener("click", scrollToPortfolio, false); 
    document.getElementById('contactlink').addEventListener("click", scrollToContact, false); 
    } 
}; 

function scrollToHome(){ 
    var scrollY = 0; 
    var distance = 40; 
    var speed = 24; 
    var currentY = window.pageYOffset; 

    var targetY = document.getElementById('chris-misterek').offsetTop; 
    var bodyHeight = document.body.offsetHeight; 
    var yPos = currentY + window.innerHeight; 
    var animator = setTimeout('scrollToHome("chris-misterek")',24); 

    if(currentY < targetY-distance){ 
     scrollY = currentY+distance; 
     window.scroll(0, scrollY); 
    } 
    else { 
     clearTimeout(animator); 
    } 
}; 

function scrollToServices(){ 
    var scrollY = 0; 
    var distance = 10; 
    var currentY = window.pageYOffset; 

    var targetY = document.getElementById('what-we-do').offsetTop; 
    var bodyHeight = document.body.offsetHeight; 
    var yPos = currentY + window.innerHeight; 
    var animator = setTimeout('scrollToServices("what-we-do")',4); 

    if(currentY < targetY-distance){ 
     scrollY = currentY+distance; 
     window.scroll(0, scrollY); 
    } 
    else { 
     clearTimeout(animator); 
    } 
}; 

function scrollToPortfolio(){ 
    var scrollY = 0; 
    var distance = 10; 
    var currentY = window.pageYOffset; 

    var targetY = document.getElementById('portfolio').offsetTop; 
    var bodyHeight = document.body.offsetHeight; 
    var yPos = currentY + window.innerHeight; 
    var animator = setTimeout('scrollToPortfolio("portfolio")',4); 

    if(currentY < targetY-distance){ 
     scrollY = currentY+distance; 
     window.scroll(0, scrollY); 
    } 
    else { 
     clearTimeout(animator); 
    } 
}; 

var scrollY = 0; 
var distance = 40; 
var speed = 24; 

function scrollToContact() { 
    var currentY = window.pageYOffset; 
    var targetY = document.getElementById('contact').offsetTop; 
    var bodyHeight = document.body.offsetHeight; 
    var yPos = currentY + window.innerHeight; 
    var animator = setTimeout('scrollToContact("contact")',24); 
    if(yPos > bodyHeight){ 
     clearTimeout(animator); 
    } else { 
     if(currentY < targetY-distance){ 
      scrollY = currentY+distance; 
      window.scroll(0, scrollY); 
     } else { 
      clearTimeout(animator); 
     } 
    } 
}; 

window.onload = smoothScroll; 

Answer 1

Разобрался, что мне нужно, чтобы добавить больше, чем равное для КРП (YPos> bodyHeight) заявление правильный код выглядит например:

function scrollToContact() { 
    var currentY = window.pageYOffset; 
    var targetY = document.getElementById('contact').offsetTop; 
    var bodyHeight = document.body.offsetHeight; 
    var yPos = currentY + window.innerHeight; 
    var animator = setTimeout('scrollToContact("contact")',24); 
    if(yPos >= bodyHeight){ 
     clearTimeout(animator); 
    } else { 
     if(currentY < targetY-distance){ 
      scrollY = currentY+distance; 
      window.scroll(0, scrollY); 
     } else { 
      clearTimeout(animator); 
     } 
    } 
};