@as_viper
Начинающий веб-разработчик

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

Всем привет!
Можете пожалуйста объяснить как реализовать плавный переход по якорным ссылкам на чистом JS?
Хочу понять с чего необходимо начать и чем закончить...
Готовые решения с десятиметровым кодом в гугле пугают))
  • Вопрос задан
  • 194 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Dasslier
FrontEnd Developer
Давным давно писал такую штуку на курсе по JS. Замени в переменных получение ссылок внутри тегов на свои теги и должно работать) Сейчас бы уже по-другому сделал, но пока такой задачи не стояло)
function getScroll() {

 	function animate(draw, duration) {
 		var start = performance.now();

 		requestAnimationFrame(function animate(time) {
 			var timePassed = time - start;

 			if (timePassed > duration) {
 				timePassed = duration;
 			}

 			draw(timePassed);

 			if (timePassed < duration) {
 				requestAnimationFrame(animate);
 			}
 		});
 	}
 	// Получаем навигационный блок и все ссылки в нем
	let nav = document.getElementsByTagName('nav')[0],
	    links = nav.getElementsByTagName('a');
	    
	    for (let i = 0; i < links.length; i++) {
	    	// Вешаем событие на каждую кликнутую ссылку
	    	links[i].addEventListener('click', () => {
	    		// Отменяем стандартные действия браузера
	    		event.preventDefault();
	    		// Задаем переменную для ссылки в цикле
	    		let link = links[i],
	    		// Получаем в переменную значение атрибута href
	    		    linkAttr = link.getAttribute('href');
	    		// Ищем в атрибуте href только буквенные значения
	    		linkAttr = linkAttr.match(/[a-z]/gi);
	    		// Полученный массив преобразовываем в строку
	    		let linkStr = linkAttr.join(''),
	    		// Ищем все элементы, в которых ID совпадает
	    		// со значением полученной выше строки
	    		    div = document.getElementById(linkStr),
	    		// Получем значение ID у найденных элементов
	    		    divId = div.getAttribute('id');
	    		// Если значение href в кликнутой ссылке равно
	    		// полученному значению ID то запускаем функцию
	    		// с анимацией
	    		if (linkStr == divId) {
	    			 // let divIdY = div.getBoundingClientRect().top;
	    				// window.scrollBy(0, divIdY / 20 -3);
	    			animate(function(timePassed) {
	    				let divIdY = div.getBoundingClientRect().top - 80;
	    				window.scrollBy(0, divIdY / 15);
	    			}, 1500);
	    		}

	    	});
	    };
 }

 getScroll();
Ответ написан
Комментировать
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
requestAnimationFrame
top.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы