[Jquery][JS] 버튼 클릭시 해당 위치로 스크롤 이벤트 이동

sungwoo choi·2020년 12월 31일
0

실제 구현 코드

    $(document).ready(function () {
        let xyobject = {
          //xyobject 안에 offset 값을 저장해서 사용
            scehdule: $('#schedule_box').offset(),
        };
      
      	//브라우저 크기를 통한 수직 중앙정렬 구현은 시간관계상 나중에..
        var browserWidth = 0;
      
        //스크롤 내려가는 이동시간
        let scroll_time = 500; // 1000 = 1sec
      
        //사이즈 규칙 1280 -> 1024 = +200 / 1024 -> 768 + 50
        //사이즈 알고리즘이 뭔가 이상함
        let middle_width = 200;
        let mobile_width = 140;
      
      //브라우저 body 쿠기를 가져와서 해상도 기준으로 좌표위치로 이동시킴
              $("#icon_schedule").click(function () {
            browserWidth = document.body.offsetWidth;
            if (browserWidth >= 1280) {
                //scehdule.top - 400 <- PC를 기준으로 계산합니다.
                $('html,body').animate({scrollTop: xyobject.scehdule.top - 400}, scroll_time);
            } else if (browserWidth < 1280 && browserWidth > 1024) {
                $('html,body').animate({scrollTop: xyobject.scehdule.top - middle_width}, scroll_time);
            } else if (browserWidth < 768) {
                $('html,body').animate({scrollTop: xyobject.scehdule.top - (middle_width - mobile_width)}, scroll_time);
            }
        });

레이아웃 크기가 일정하지 않을경우 좌표 규칙이 없어서 맞추기 좀 까다로우니, 설계부터 신경써서 해야할듯;

profile
dantedev 나 혼자하는 메모

0개의 댓글