Категория:
Опубликовано:

Плавный переход ко всем якорям на странице

Якорь HTML

Улучшаем юзабилити нашего сайта. Добавляем эффект плавного перехода по якорям, с помощью jQuery.

С помощью очень простого JS кода можно добиться весьма эффектного действия, при переходе по ссылке на якорь.

Собственно сам код:
$('a[href^="#"]').click(function () {
  elementClick = $(this).attr("href");
  destination = $(elementClick).offset().top;
  if($.browser.safari){
    $('body').animate( { scrollTop: destination }, 500 );
  }else{
    $('html').animate( { scrollTop: destination }, 500 );
  }
  return false;
});

Можно немного поиграться с параметрами скорости анимации, для достижения необходимого эффекта.

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

$("a.scroll").click(function () {
  elementClick = $(this).attr("href");
  destination = $(elementClick).offset().top;
  if($.browser.safari){
    $('body').animate( { scrollTop: destination }, 500 );
  }else{
    $('html').animate( { scrollTop: destination }, 500 );
  }
  return false;
});

Теперь, для якорей к которым должен быть плавный переход, необходимо добавить класс "scroll". Например: Ссылка

Единственный не очень приятный момент в этом способе, это отсутствие ссылки на якорь в адресной строке браузера, при переходе по якорю. Но не думаю что это смертельно...

Эффект можно протестировать нажав сюда.

Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.