Как заставить работать плавную прокрутку Jquery?

Я нашел файл Jquery с плавной прокруткой, написанный этим парнем Карлом Сведбергом. Ссылка находится здесь: https://github.com/kswedberg/jquery-smooth-scroll. Я хотел, чтобы мой значок навигации плавно прокручивался до точки привязки после нажатия. Мой HTML-код для панели навигации находится здесь:

<div class="nav">           
    <ul>
        <li class="icon"><a href="#info"><img src="./Img/info-64.png" alt="info-icon"></a></li>
        <li class="icon"><a href="#education"><img src="./Img/Icon-edu.png" alt="info-icon"></a></li>
        <li class="icon"><a href="#employment"><img src="./Img/Icon-employment.png" alt="info-icon"></a></li>
        <li class="icon"><a href="#skill"><img src="./Img/Icon-skills.png" alt="info-icon"></a></li>
        <li class="icon"><a href="#achievement"><img src="./Img/Icon-achiev.png" alt="info-icon"></a></li>
        <li class="icon"><a href="#"><img src="./Img/photo-64.png" alt="info-icon"></a></li>
        <li class="icon"><a href="#personality"><img src="./Img/Icon-personality.png" alt="info-icon"></a></li>
    </ul>
    </div>

Это вертикальная панель навигации с множеством значков вместо текста. Файл Jquery довольно сложен для моего текущего понимания, и я пока не смогу создать что-то более конкретное. Так что ваша помощь очень ценится!


jquery smooth-scrolling
person Nguyen Tuan    schedule 05.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

использование встроенной анимации jquery, вероятно, было бы проще. На этой странице описано, как это сделать довольно легко;

http://css-tricks.com/snippets/jquery/smooth-scrolling/

код оттуда вот такой;

$(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;
      }
    }
  });
});

чтобы использовать его, добавьте привязку с href так же, как элемент, к которому вы хотите прокрутить. например

<a href="#one">link to div 1</a>
<div id="one"></div>
person Whiplash450    schedule 05.02.2015