1

私はJSを始めたばかりで苦労しています。この素敵なコードを Adam Khoury から入手しました。ページをスクロールしてターゲット要素まで美しくアニメーション化されています。

はul、固定位置のナビゲーション バー内にあります。

nav私の質問は次のとおりです。アンカーがクリックされたときにアニメーションを上下にスクロールするには、どのコードが必要ですか?

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>

4

3 に答える 3

2

JavaScript から JQuery へと私を導いてくれた Dave に感謝します。このコードのビットは、本当に初心者に優しいものです。編集する必要はまったくありません。index.html に貼り付けてバムするだけです。そしてそれは動作します 

<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 -->
于 2014-12-19T10:29:52.397 に答える
0

実際にテストするためにこれをすべてページに入れる時間はありませんが、最初に試すのは次の行に沿ったものです。

    if(currentY < targetY-distance){
        scrollY = currentY+distance;
        window.scroll(0, scrollY);
    } else {
        scrollY = currentY-distance;
        window.scroll(0, scrollY);
    }

currentY が targetY-distance より大きい場合、タイムアウトをクリアする代わりに、反対方向にスクロールしますか? うまくいかないかもしれませんが、試してみる価値はあります...

于 2014-12-18T20:17:35.153 に答える