Как реализовать плавный переход по якорной ссылке?

Question

[Alexandr2698]

есть меню

<ul class="menu-order">
						<li>
							<a href="#1">1</a>
						</li>
						<li>
							<a href="#2">2</a>
						</li>
						<li>
							<a href="#3">3</a>
						</li>
						<li>
							<a href="#4">4</a>
						</li>
					</ul>

и блоки с соответствующими id. Как реализовать плавный переход к якорю?

Comments

[Котик Антон]

плавный

Answer 1

[VelAnna]

$(document).on('click', '.menu-order li a', function() {
  var linkID = $(this).attr('href');
  $('html, body').animate({ 
    scrollTop: $(linkID).offset().top 
  }, 'slow');
});

Comments

[Alexandr2698]

Возможно ли сделать скрипт универсальным? Т. е. чтобы он работал для любого якоря, а не только для того который расположен в данном меню

[VelAnna]

Alexandr2698, я написала как раз такой вариант.
Переменной linkID будет присваиваться значение атрибута href той ссылки, на которую кликнули (см. описание функции). А потом будет сроллить до тега, который будет иметь id = href

Answer 2

[Александр Косицын]

ВОт ссылка на codepen на нативном, у функция на все случаи жизни

Answer 3

[Glorious Cat]

$(".menu-order li a").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 750,
      easing: "swing"
    });
    return false;
  });