자바스크립트 javascript 12. (6) 버튼 활용해서 다양한 이벤트 만들기

신디블로그 2023. 4. 13. 16:34
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
저작자표시 비영리 변경금지 (새창열림)