이번 포스팅에서는 스크롤생성시 TOP버튼을 눌러
화면상단으로 이동하는 것을 만들어 보겠습니다.
[JS]상단으로 이동 TOP버튼 만들기
https://stickode.com/detail.html?no=2450
스틱코드
stickode.com
TOP 버튼을 눌러 화면상단으로 이동하기 버튼을 만들어 보겠습니다.
Top버튼을 javascript로 만들어 두고 화면마다, 유용하게 사용할수 있습니다.
<index.php>
화면을 스크롤 하기 위해 scene를 두장으로 구성 해봅니다.
(스크롤전 노랑배경, 스크롤 후 흰배경)
화면 전환 css는 index.php에 직접 작성합니다.
<!-- css -->
<link rel="stylesheet" type="text/css" href="./style.css">
<body>
<style>
/* 메인화면 CSS*/
.scene{
top:0;
left:0;
height:100vh;
overflow:hidden;
background-attachment:fixed;
background-size: cover;
}
.scene.one{
background:yellow;
}
.scene.two{
background:white;
}
header{
margin:0;
padding:0;
}
</style>
<!-- 스크롤전 첫화면(노랑배경) -->
<section class ="scene one">
<header>
<div class="title">Javascript<br>top btn</a>
</header>
<!-- top버튼 클릭시 화면상단으로 이동 -->
<a id ="backtotop">Top</a>
<!-- javascript -->
<script src ="./main.js"></script>
</div>
</div>
</section>
<!-- 스크롤후 두번째화면(흰배경) -->
<section class ="scene two">
<div class="title">Scroll</div>
</section>
< main.js >
TOP 버튼의 설정을 자바스크립트로 만들어줍니다.
TOP버튼은 스크롤이 생기기전 에는 보이지 않고, 스크롤이 생겼을때만 우측 하단에 나타납니다.
스크롤이 어디까지 올라갈지 위치값을 정하고, behavior를 smooth로 설정해줍니다.
이 설정을해주면 딱딱끊어지는 느낌이아닌 부드러운 느낌으로 스크롤 할 수 있습니다.
const backToTop = document.getElementById('backtotop');
const checkScroll=()=>{
// 페이지가 수직으로 얼마나 스크롤되었는지를 확인하는 값(픽셀 단위로 변환) pageOffset
let pageOffset = window.pageYOffset;
// 이 값이 0이 아니면, 클래스를 show를 선언하고, 그렇지 않다면 show를 삭제한다. 디폴트 css는 hidden상태
// 0이면 스크롤이 안된상태 이고, 0이 아니면 스크롤이 일어난상태
if(pageYOffset !== 0){
// id= backtotop class="show"를 추가한다.
backToTop.classList.add('show');
}else{
backToTop.classList.remove('show');
}
}
const moveBackToTop=()=>{
if(window.pageYOffset > 0 ){
//스무스하게 스크롤 하기 //어디까지 올라갈지 위치를 정한다. behavior 자연스럽게 이동.
window.scrollTo({top:0, behavior:"smooth"});
}
}
// 스크롤할때마다, checkScroll을 호출해라.
window.addEventListener('scroll', checkScroll);
// 클릭하면 oveBackToTop를 호출해라
backToTop.addEventListener('click',moveBackToTop);
< style.css >
TOP버튼의 모양CSS를 만들고, TOP버튼의 스크롤 옵션을 지정해줍니다.
*{padding:0;margin:0;}
*{text-decoration:none;}
/* 메인화면*/
.title{
margin-top:130px;
margin-bottom:60px;
margin-left: 200px;
margin-right: 200px;
display: flex;
font-size: 6.5em;
font-weight: bold;
font-family: 'Montserrat', sans-serif
}
/* top버튼 */
#backtotop{
background-color: #333;
font-size: 1em; color:#fff;
/* 가운데정렬을위한 lineheight */
line-height: 50px;
text-align: center;
width:50px;
height:50px;
/* 원만들기 */
border-radius: 40px;
position: fixed;
bottom: 60px;
right:60px;
transition-property: background-color, opacity, visibility;
transition-duration: 0.3s, 0.5s, 0.5s;
opacity: 0;
visibility: hidden;
z-index: 999;
}
/* top icon 스크롤 옵션 */
#backtotop:after{
line-height: 40px;
}
#backtotop.show{
opacity:1;
visibility:visible;
}
#backtotop.show:hover{
cursor:pointer;
background-color: blue;
}< 결과화면 >
부드러운 TOP버튼을 얻을 수 있습니다!
스틱코드에가서 코드를 즐겨찾기 한 뒤 활용해보시기 바랍니다!
이외에도 유용한 소스들을 제공하고있습니다. 꼭 사용해보세요!
https://stickode.com/detail.html?no=2450
스틱코드
stickode.com
'JavaScript' 카테고리의 다른 글
| [JAVA][Android] Dagger2 익혀보기 (0) | 2021.10.25 |
|---|---|
| [javascript] 그림판 만들기 (0) | 2021.09.25 |
| [JavaScript] 스탑워치 만들기 (2) | 2021.09.16 |
| [JavaScript] 구글맵 API 클러스터링 만들기 (0) | 2021.07.10 |
| [JavaScript] 빠르게 To Do 리스트 만들기 (0) | 2021.07.08 |
