Категория:
Опубликовано:
Плавный переход ко всем якорям на странице
Улучшаем юзабилити нашего сайта. Добавляем эффект плавного перехода по якорям, с помощью 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".
Например: Ссылка
Единственный не очень приятный момент в этом способе, это отсутствие ссылки на якорь в адресной строке браузера, при переходе по якорю. Но не думаю что это смертельно...
Эффект можно протестировать нажав сюда.
Делитесь полезными материалами в социальных сетях.