@S1TEMAKER

Как сделать скролл сайта по якорям на событии scroll?

Прошу помощи,
нужно сделать скролл сайта по якорям,
ниже код, но что то он не работает
суть такая,
- при загрузке страницы формируем массив с якорями
- при возникновении скролла останавливаем его и прокручиваем страницу на следующий якорь, значение scrollTop берем из массива
- на время прокрутки меняем флаг isAnimating, что бы дождаться окончания прокрутки
<section class="anchor" id="anchor1"></section>
<section class="anchor" id="anchor2"></section>
<section class="anchor" id="anchor3"></section>

var anchors = [];
	var currentAnchor = 0;
	var isAnimating  = false;
	var curSt = 0;
	$('.anchor').each(function(i, element){
		anchors.push( $(element).offset().top );
	});
	$(window).scroll(function(e){
		if( !isAnimating ){
			isAnimating  = true;
			e.preventDefault();
			e.stopPropagation();
			var st = $(window).scrollTop();
			if (st > curSt) currentAnchor++;
			else currentAnchor--;
			curSt = st;
			$('html, body').animate({
				scrollTop: parseInt( anchors[currentAnchor] )
			}, 500,function(){isAnimating  = false;});
		}
	});
  • Вопрос задан
  • 378 просмотров
Пригласить эксперта
Ответы на вопрос 1
Elisseii
@Elisseii
Пишу музыку и код.
Может стоит попробовать One Page Scroll что бы не морочиться с логикой? В демо как раз нужный эффект наблюдается.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
26 апр. 2024, в 07:20
2000 руб./за проект
26 апр. 2024, в 06:46
1000 руб./в час
26 апр. 2024, в 05:31
1000 руб./за проект