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

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

Всем привет!
Можете пожалуйста объяснить как реализовать плавный переход по якорным ссылкам на чистом JS?
Хочу понять с чего необходимо начать и чем закончить...
Готовые решения с десятиметровым кодом в гугле пугают))
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Dasslier
Junior 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.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
До 170 000 руб.
IT IS Kernel Новосибирск
от 100 000 руб.
Индустрия Москва
от 200 000 до 250 000 руб.
16 сент. 2019, в 16:51
10000 руб./за проект
16 сент. 2019, в 16:47
25000 руб./за проект
16 сент. 2019, в 16:31
5000 руб./за проект