Анимация перехода к якорным ссылкам


По умолчанию, при клике по якорной ссылке, которая выглядит так <a href=»#about»>О нас</a>, происходит резкий переход к нужному элементу на сайте. Если переход происходит в рамках одной страницы, или сайт подразумевает собой лендинг, такой эффект выглядит непрезентабельным. 
По этому, таким ссылкам можно добавить анимацию плавного перехода ( скролла ) к нужному элементу. 
Сделать это можно при помощи jQuery.

Приведённый небольшой код ниже, поможет сделать сайт немного презентабельнее и красивее.
В примере приведено событие по клику на ссылку в меню с классом «menu». Так-же данный код можно применить вообще на все ссылки на сайте, так как присутствует проверка, якорная ссылка или нет.

$(document).ready(function(){
	$('.menu a').click(function(e){
    	if($(this).attr('href').indexOf('#') != -1){ // Проверяем, является и ссылка действительно якорной ссылкой.
			e.preventDefault(); // Отменяем событие перехода.
            var href = $(this).attr('href').replace('#', ''); // Получаем из якорной ссылки нужный ID элемента, к которому будет происходить переход.
			
			if($('#'+href).length > 0){ // Проверяем, существует ли на странице нужный нам элемент.
            	var tophref = $('body').find('#'+href).offset().top; // Получаем координаты элемента, относительно начала страницы.
            	$('html, body').animate({scrollTop: tophref}, 800); // Создаём анимацию скрола к нужному элементу.
			}
		}
    });
});

Для связи

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

Или написать прямо на почту info@bobreod.ru





Отправляя форму, вы соглашаетесь с нашей политикой конфиденциальности