실제 구현 코드
$(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);
}
});
레이아웃 크기가 일정하지 않을경우 좌표 규칙이 없어서 맞추기 좀 까다로우니, 설계부터 신경써서 해야할듯;