javascript - 普通 JavaScript 中的滚动动画仅适用于导航链接

Question

这是演示我的问题的代码笔:http://codepen.io/PiotrBerebecki/pen/yaWQwZ

目标是当用户点击时有滚动动画

1. 顶部导航链接，以及
2. Back to Top 按钮在右下角。

我已经设法实现了满足要求 1 的 vanilla JavaScript 解决方案，但我在满足要求 2 时遇到了困难。

该解决方案依赖于递归 scrollTo 函数。

如您所见，当您向下滚动并单击 My work 链接时，动画会正确运行。但是，当您向下滚动并单击 Back to Top 按钮时，没有动画，页面只是跳转到顶部。我不知道为什么以及如何解决它。

这是JS代码:

(function() {


  // ======== SCROLL FUNCTION ======== //
  const scrollTo = (element, to, duration) => {
    if (duration <= 0) {return;}
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(() => {
      element.scrollTop = element.scrollTop + perTick;
      if (element.scrollTop === to) {return;}
      scrollTo(element, to, duration - 10);
    }, 10);
  }


  // ======== TOP NAVIGATION ======== //
  // Save DOM elements that can be scrolled to
  let targetElements = {};
  (function() {
    const myWork = document.getElementById('my-work');
    const contact = document.getElementById('contact');
    targetElements = {
      'my-work': myWork,
      contact: contact
    };
  })();

  // Select links with scroll action
  const scrollElements = document.getElementsByClassName('scroll');

  // Add event listeners to navigation links with scroll action
  Array.prototype.forEach.call(scrollElements, scrollElement => {
    scrollElement.addEventListener('click', event => {
      event.preventDefault();
      const targetElement = targetElements[(scrollElement.getAttribute('href').slice(1))];
      scrollTo(document.body, targetElement.offsetTop, 800);
    });
  });


  // ======== BACK TO TOP BUTTON ======== // 
  const backToTopElement = document.getElementsByClassName('back-to-top')[0];
  const backToTopTargetElement = document.getElementById('my-work');

  backToTopElement.addEventListener('click', () => {
    scrollTo(document.body, backToTopTargetElement.offsetTop, 800);
  });

})();

这是 HTML(返回顶部 按钮在底部):

<!-- ======== NAVIGATION ======== -->
<nav role='navigation'>

  <div id="logo-container">
    <a class="scroll" href="#my-work">SUPER CAT</a>
  </div>

  <ul id="menu">
    <li><a class="scroll menu-link" href="#my-work">MY WORK</a></li>
    <li><a class="scroll menu-link" href="#contact">CONTACT</a></li>
  </ul>

</nav>


<!-- ======== MY WORK ======== -->
<article id="my-work">


  <header>
    <h1>MY WORK</h1>
  </header>


  ...


</article>


<!-- ======== CONTACT ======== -->
<footer id="contact">

  <h2>CONTACT</h2>

  ...

</footer>


<a href="#" class="back-to-top">Back to Top</a>

Answer 1

尝试删除 #从您的 <a> 中的 href 锚定标签:

<a href="javascript:void(0);" class="back-to-top">Back to Top</a>

更新笔:http://codepen.io/anon/pen/YGbBXz

这是一个很好的引用问题/答案，应该可以解决有关 href="#" 的任何进一步问题。和 href属性(property)包含:What is href="#" and why is it used?

总结以上帖子(关于评论中的问题):

href="#"定位到页面顶部。

href仅当 anchor 标记是超链接时才需要。