SMALL
<style>
* {
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" class="btn1">page1</a></li>
<li><a href="#box2" class="btn2">page2</a></li>
<li><a href="#box3" class="btn3">page3</a></li>
<li><a href="#box4" class="btn4">page4</a></li>
</ul>
<script src="jquery/jquery-3.6.4.min.js"></script>
<script>
let num = 1;
let txt = 'hello world';
let ar = [10,20,30,40];
console.log(ar);
console.log(ar[0]); // ar[인덱스번호]
// jQuery 기반
const btn = $('.menu li a');
console.log(btn);
console.log(btn[3]);
// eq(인덱스번호)
// 변수명.eq(인덱스번호)
console.log(btn.eq(0));
btn.on('click', function(e) {
// this = 전체버튼4개중에 클릭한 대상
let btn_name = $(this).attr('href');
console.log(btn_name);
// 클릭한대상의 페이지 offset().top 가져오기
let page_top = $(btn_name).offset().top
console.log(page_top);
$('html, body').animate({
scrollTop : page_top
},500,'swing');
//html href 동작방지
e.preventDefault();
});
$('.top').on('click',function(e){
$('html,body').animate({
scrollTop : 0
}, 500,'swing');
//타이멍펑션
//'linear' = 등속도
//'swing' = 가속과 감속
e.preventDefault();
})
</script>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 12. (4) 클릭하면 해당페이지로 넘어가는 이벤트 발생하기 (2) 업그레이드편 (0) | 2023.04.13 |
|---|---|
| 자바스크립트 javascript 12. (5) 버튼 눌러서 애니메이션 실행하는 js코드 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (4) 클릭하면 해당페이지로 넘어가는 이벤트 발생하기 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (3) 애니메이션을 활용하여 스크롤에 위치했을때 생겨나는 애니메이션 코드 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (2) 움직이면 고정되는 스크롤바 만들기 (0) | 2023.04.13 |
댓글