JavaScript的滚动与动画元素的onclick [英] Javascript scroll to element with animation onclick

问题描述

我刚刚开始接触JS和挣扎。我从亚当·扈利code这个可爱的一点，它的工作精美动画的页面向下滚动到目标元素。

的 UL 是一个固定的位置导航条内。

我的问题是：需要采取什么code键使动画滚动向上和向下时，在锚导航点击

\r

\r

VAR scrollY = 0;\r
VAR距离= 10;\r
VAR速度= 24;\r
\r
功能autoScrollTo（EL）{\r
  VAR currentY = window.pageYOffset;\r
  VAR targetY =的document.getElementById（EL）.offsetTop;\r
  VAR bodyHeight = document.body.offsetHeight;\r
  VAR yPos = currentY + window.innerHeight;\r
  VAR动画= setTimeout的（'autoScrollTo（\\''+ EL +\\'），24）;\r
  如果（yPos＆GT; bodyHeight）{\r
    clearTimeout（动画）;\r
  }其他{\r
    如果（currentY＆LT; targetY - 距离）{\r
      scrollY = currentY +距离;\r
      window.scroll（0，scrollY）;\r
    }其他{\r
      clearTimeout（动画）;\r
    }\r
  }\r
}\r
\r
功能resetScroller（EL）{\r
  VAR currentY = window.pageYOffset;\r
  VAR targetY =的document.getElementById（EL）.offsetTop;\r
  VAR动画= setTimeout的（'resetScroller（\\''+ EL +\\'），速度）;\r
  如果（currentY＆GT; targetY）{\r
    scrollY = currentY - 距离;\r
    window.scroll（0，scrollY）;\r
  }其他{\r
    clearTimeout（动画）;\r
  }\r
}

\r

＆LT; UL类=主导航＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃的onclick =返回false; onmousedown事件=autoScrollTo（'约'）;＆GT;\r
      关于＆LT; / A＆GT;\r
  ＆LT; /李＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃的onclick =返回false; onmousedown事件=autoScrollTo（'推荐'）;＆GT;\r
      谈＆LT; / A＆GT;\r
  ＆LT; /李＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃的onclick =返回false; onmousedown事件=autoScrollTo（'接触'）;＆GT;\r
      联系与LT; / A＆GT;\r
  ＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
\r
＆LT;小时风格=保证金：25em 0; /＆GT;\r
\r
＆LT; D​​IV ID =关于阶级=navButton＆GT;\r
  ＆LT; P＆gt;关于LOREM ipsom ....＆LT; / P＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT; D​​IV ID =推荐级=navButton＆GT;\r
  ＆LT; P＆GT;见证LOREM ipsom ....＆LT; / P＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT; D​​IV ID =接触级=navButton＆GT;\r
  ＆LT; P＆GT;联系Lorem存有＆LT; / P＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

解决方案

感谢戴夫转向我从JavaScript路程，到JQuery的。
code的这一点确实是福利局友好。你并不需要在所有编辑它，只需将其粘贴到您的index.html和Bam！和它的作品

 ＆LT;头类=主标题＆GT;                ＆LT; UL类=主导航＆GT;
                ＆LT;立GT;＆LT; A HREF =＃关于＆gt;关于＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;立GT;＆LT; A HREF =＃感言＆GT;谈＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;立GT;＆LT; A HREF =＃接触＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;
                ＆LT; / UL＆GT;
        ＆LT; /头＆GT;＆LT;！ - 平滑滚动 - ＆GT;
        ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js＆GT;＆下; /脚本＆GT;
        ＆LT;脚本＆GT;
        $（函数（）{
          $（'一[HREF * =＃]：不使用（HREF =＃]）'）。点击（函数（）{
            如果（location.pathname.replace（/ ^ \\ //，''）== this.pathname.replace（/ ^ \\ //，''）及与放大器; location.hostname == this.hostname）{
              VAR的目标= $（this.hash）;
              目标= target.length？目标：$（'[NAME ='+ this.hash.slice（1）+']'）;
              如果（target.length）{
                $（'HTML，身体）。动画（{
                  scrollTop的：target.offset（）顶部
                }，1000）;
                返回false;
              }
            }
          }）;
        }）;
        ＆LT; / SCRIPT＆GT;
        ＆LT;！ - 平滑滚动结束 - ＆GT;
 

I'm just starting out with JS and struggling. I got this lovely bit of code from Adam Khoury and it's working beautifully animated scrolling down the page to the target element.

The ul is within a fixed position navigation bar.

My question is: what code would be needed to make the animation scroll both up and down when the anchor in the nav is clicked?

var scrollY = 0;
var distance = 10;
var speed = 24;

function autoScrollTo(el) {
  var currentY = window.pageYOffset;
  var targetY = document.getElementById(el).offsetTop;
  var bodyHeight = document.body.offsetHeight;
  var yPos = currentY + window.innerHeight;
  var animator = setTimeout('autoScrollTo(\'' + el + '\')', 24);
  if (yPos > bodyHeight) {
    clearTimeout(animator);
  } else {
    if (currentY < targetY - distance) {
      scrollY = currentY + distance;
      window.scroll(0, scrollY);
    } else {
      clearTimeout(animator);
    }
  }
}

function resetScroller(el) {
  var currentY = window.pageYOffset;
  var targetY = document.getElementById(el).offsetTop;
  var animator = setTimeout('resetScroller(\'' + el + '\')', speed);
  if (currentY > targetY) {
    scrollY = currentY - distance;
    window.scroll(0, scrollY);
  } else {
    clearTimeout(animator);
  }
}

<ul class="main-nav">
  <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('about');">
      About</a>
  </li>
  <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('testimonials');">
      Testimonials</a>
  </li>
  <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('contact');">
      Contact</a>
  </li>
</ul>

<hr style="margin: 25em 0;" />

<div id="about" class="navButton">
  <p>About lorem ipsom....</p>
</div>

<div id="testimonials" class="navButton">
  <p>Testimonial lorem ipsom....</p>
</div>

<div id="contact" class="navButton">
  <p>Contact lorem ipsum</p>
</div>

解决方案

Thanks to Dave for steering me away from javascript and on to JQuery. This bit of code is really newb friendly. You don't need to edit it at all, just paste it in your index.html and bam! and it works

<header class="main-header">

                <ul class="main-nav">
                <li><a href="#about">About</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
                </ul>
        </header>    

<!-- SMOOTH SCROLL -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function() {
          $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                $('html,body').animate({
                  scrollTop: target.offset().top
                }, 1000);
                return false;
              }
            }
          });
        });
        </script>
        <!-- End of SMOOTH SCROLL -->   

这篇关于JavaScript的滚动与动画元素的onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！