滚动自动化不会在最后 Link 停止

Question

我有一个 javascript 功能不太正常。它对除最后一个以外的所有 links 都非常有效。当 link 被触发时，它会滚动到底部，然后不允许您向上滚动……尽管我已尽最大努力。

也许我的做法是完全错误的。

这是标记：

  <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

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

滚动自动化不会在最后 Link 停止

Scroll Automation Wont Stop on Last Link

javascript

autoscroll