JS / nav anchor, active 효과 구현

스크롤에 따른 nav 엑티브효과 anchor 효과

코드펜에서 뺏겨 왔다. 키키

 

출처

https://codepen.io/eksch/pen/xwdOeK

 

Jump menu with active class and smooth scroll

<nav class="navigation" id="mainNav">
	<a class="navigation__link" href="#1">Section 1</a>
	<a class="navigation__link" href="#2">Section 2</a>
	<a class="navigation__link" href="#3">Section 3</a>
</nav>

<div class="page-section hero" id="1">
	<h1>Smooth scroll, fixed jump menu with active class</h1>
</div>

<div class="page-section" id="2">
	<h1>Section Two</h1>
</div>

<div class="page-section" id="3">
    <h1>Section Three</h1>
</div>

 

$(document).ready(function() {
	$('a[href*=#]').bind('click', function(e) {
		e.preventDefault(); // prevent hard jump, the default behavior

		var target = $(this).attr("href"); // Set the target as variable

		// perform animated scrolling by getting top-position of target-element and set it as scroll target
		$('html, body').stop().animate({
				scrollTop: $(target).offset().top
		}, 600, function() {
			location.hash = target; //attach the hash (#jumptarget) to the pageurl
		});
			return false;
	});
});

$(window).scroll(function() {
	let scrollDistance = $(window).scrollTop();

	$('.page-section').each(function(i) {
		if ($(this).position().top <= scrollDistance) {
			$('.navigation a.active').removeClass('active');
			$('.navigation a').eq(i).addClass('active');
		}
	});
}).scroll();

https://webclub.tistory.com/304

이건 또다른 참고소스

스크롤 메뉴(Scroll Menu) 구현해보기