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

标签 javascript animation events dom recursion

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

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

  1. 顶部导航链接,以及
  2. 右下角的返回顶部按钮。

我已经成功实现了一个满足要求 1 的普通 JavaScript 解决方案,但我在满足要求 2 方面遇到了困难。

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

正如您所见,当您向下滚动并单击我的作品链接时,动画会正确运行。但是,当您向下滚动并单击返回顶部按钮时,没有动画,页面只是跳到顶部。我不明白为什么以及如何解决它。

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>

最佳答案

尝试删除#来自 <a> 中的 href 的 anchor 标签:

<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 标记是超链接时才需要。

关于javascript - 普通 JavaScript 中的滚动动画仅适用于导航链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40309903/

相关文章:

java - 使用 jquery 自动完成将值传递给隐藏字段

javascript - 记住在 css 中所做的更改

javascript - 检查 CRM 用户是否有权通过 JS 限定潜在客户

python - Matplotlib 动画不显示

ios - 我的 iOS 应用程序如何为一系列颜色设置动画?

javascript - 如何隐藏不包含文本的 DOM 元素?

javascript - 防止谷歌图表中的默认排序事件

javascript - 将 var 乘以数字插入 mongodb

javascript - KineticJS - 动态创建形状数组并使用事件

javascript - 是否可以更改成帧器中鼠标悬停时按钮的颜色?