Javascript прокрутите до элемента с анимацией onclick

Question

Я только начинаю с JS и борюсь. Я получил этот прекрасный код от Адама Хури, и он прекрасно работает в анимированном прокрутке страницы до целевого элемента.

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>

Answer 1

Благодаря Дейву для рулевого меня от яваскрипт и на JQuery. Этот бит кода действительно дружелюбен. Вам не нужно редактировать его вообще, просто вставьте его в свой index.html и bam! и он работает

<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 --> 

Answer 2

У меня нет времени, чтобы положить все это на странице, чтобы действительно проверить это, но то, что я хотел бы попробовать первое что-то вдоль этих линий:

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

Итак, вместо очистки таймаута, когда currentY больше, чем targetY-distance, он прокручивается в противоположном направлении? Может не работать, но стоит ...

Answer 3

Если вы хотите использовать jQuery, это будет намного проще. Все, что вам нужно сделать, это получить верхнюю часть элемента .offset(), которую вы хотите прокрутить, а затем анимировать позицию scrollTop с помощью функции jQuery .animate().

function autoScrollTo(el) { 
 
    var top = $("#" + el).offset().top; 
 
    $("html, body").animate({ scrollTop: top }, 1000); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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>