제이쿼리 풀페이지처럼 네비게이션 클릭시 섹션이 부드럽게 이동하는 코드를 짜보고싶어서
유튜브를 보면서 작성을 해봤는데
작동이 잘 안되더라구요…
main
about
skills
portfolio
contact
를 각각 클릭할때 해당 섹션으로 이동을 하고싶은데
첫화면에서는 어떤 메뉴를 클릭을 해도 해당 섹션으로 이동이 되는데
skills 에서 portfolio을 클릭을 할때는 이동이 되지않는 현상이 나타나고
그리고
skills를 클릭을 해서 섹션이동후 다시한번 누르면 첫화면으로 돌아가는 현상이 발생하는데
어디서 문제인지 알 수 있을까요…ㅠㅠ
=============
<title>Document</title>
<style>
.wrap{
width: 100%;
}
.section{
width: 100%;
height: 100vh;
}
.section01{background: rgba(255,0,0,0.5);}
.section02{background: rgba(0,255,0,0.5);}
.section03{background: rgba(0,0,255,0.5);}
.section04{background: rgba(0,255,255,0.5);}
/* */
.header{
width: 100%;
height: 100px;
background: rgba(255,0,255,0.5);
position: fixed;
}
.header .container{
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.btn_ham{
position: relative;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
width: 50px;
height: 50px;
cursor: pointer;
}
.btn_ham .line{
width: 100%;
height: 10px;
border-radius: 10px;
background: black;
}
.nav{
position: relative;
right: 0;
}
.nav{
position: fixed;
display: flex;
justify-content: center;
right: -100%;
top: 0;
width: 300px;
height: 100vh;
background: #fff;
transition: 0.5s ease-in;
}
.nav.visible{
right: 0;
}
.main_nav{
}
.main_nav li{
padding-top: 3rem;
font-size: 24px;
font-weight: 600;
}
</style>
<div class="btn_ham" id="btn_ham">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</header>
<nav class="nav" id="nav">
<ul class="main_nav">
<li id="clo_btn">close</li>
<li class="select01">Main</li>
<li class="select02">About</li>
<li class="select03">Skills</li>
<li class="select04">Portfolio</li>
<li class="select05">Contact</li>
</ul>
<script></script>
</nav>
<script>
var btn = document.getElementById('btn_ham'),
Nav = document.getElementById('nav'),
clo = document.getElementById('clo_btn');
btn.addEventListener('click',function(){
Nav.style.right = '0';
})
clo.addEventListener('click',function(){
Nav.style.right = '-100%';
})
</script>
<section class="section section01 main" id="main"></section>
<section class="section section02 about" id="about"></section>
<section class="section section03 skills" id="skills"></section>
<section class="section section04 portfolio" id="portfolio"></section>
<footer class=" section section05 footer" id="footer"></footer>
<script>
function smoothScroll(target,duration){
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime){
if(startTime === null)
startTime = currentTime;
var timeElapsed =currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance,duration)
window.scrollTo(0,run);
if(timeElapsed < duration) requestAnimationFrame(animation);
console.log('timeElapsed : ' + timeElapsed + 'duration : ' + duration)
}
function ease(t,b,c,d){
t /= d /2;
if (t< 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t -2) - 1) + b;
}
requestAnimationFrame(animation);
}
var section01 = document.querySelector('.select01');
var section02 = document.querySelector('.select02');
var section03 = document.querySelector('.select03');
var section04 = document.querySelector('.select04');
var section05 = document.querySelector('.select05');
section01.addEventListener('click',function(){
smoothScroll('.section01',1000)
})
section02.addEventListener('click',function(){
smoothScroll('.section02',1000)
})
section03.addEventListener('click',function(){
smoothScroll('.section03',1000)
})
section04.addEventListener('click',function(){
smoothScroll('.section04',1000)
})
section05.addEventListener('click',function(){
smoothScroll('.section05',1000)
})
</script>
</div>