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

Scroll Automation Wont Stop on Last Link

本文关键字:链接 最后一个 自动化 滚动      更新时间:2023-09-26

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

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