滚动自动化不会在最后一个链接上停止答案

【问题标题】：Scroll Automation Wont Stop on Last Link滚动自动化不会在最后一个链接上停止
【发布时间】：2016-02-08 08:11:36
【问题描述】：

我有一个 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;

【问题讨论】：

标签： javascript autoscroll

【解决方案1】：

发现我需要为 if(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);
        }
    }
};

【讨论】：