SMALL
<style>
html {
scroll-behavior: smooth;
/*
a태그를 활용하여 브라우저의 스크롤 위치를 변경할때
스크롤동작에 애니를 표현
복잡한 형태의 스크롤애니표현 ---> 자바스크립트활용하기
*/
}
* {
margin:0;
padding:0;
}
.box {
height: 1000px;
font-size: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.box:nth-child(odd) {
background-color: #fc0;
}
.box:nth-child(even) {
background-color: #f20;
}
.top {
position: fixed;
right:100px;
bottom:100px;
width: 100px;
height: 100px;
background-color: #000;
color:#fff;
}
.menu {
position: fixed ;
left:100px;
top:100px;
z-index: 100;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box" id="box1">Page1</div>
<div class="box" id="box2">Page2</div>
<div class="box" id="box3">Page3</div>
<div class="box" id="box4">Page4</div>
<a href="#" class="top">위로가기</a>
<ul class="menu">
<li><a href="#box1">page1</a></li>
<li><a href="#box2">page2</a></li>
<li><a href="#box3">page3</a></li>
<li><a href="#box4">page4</a></li>
</ul>
<!--
href="#" --- 브라우저 상단으로 이동
href="#name" --- 해당 아이디요소를 찾아감, 없을경우는 이동없음.
id="aa" #aa
-->
</body>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 12. (4) 클릭하면 해당페이지로 넘어가는 이벤트 발생하기 (2) 업그레이드편 (0) | 2023.04.13 |
|---|---|
| 자바스크립트 javascript 12. (5) 버튼 눌러서 애니메이션 실행하는 js코드 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (3) 애니메이션을 활용하여 스크롤에 위치했을때 생겨나는 애니메이션 코드 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (2) 움직이면 고정되는 스크롤바 만들기 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. scroll eventjquery 기반 scrollTop() , offset, jQueury animate(), 매개변수활용하기 (1) (0) | 2023.04.13 |
댓글