클릭 시 원하는 위치로 스크롤링 되기
본문
모달창 안에서
좌측 메뉴를 클릭했을때 우측의 스크롤이 해당 위치의 맨 윗쪽에 맞게 위치하고 싶은데요
구조는 잘 들어간것같은데 클릭하면 제가 놓은 선택자로 가지않고 이상한곳으로 갑니다.
그리고 여러번 클릭했을때 유동적으로 움직이는것같아요 ..
제가 원하는 곳에 픽스되도록 수정좀 부탁드립니다 ..!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>스크롤</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="http://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<style>
.modal .modal-content.modal-content__form { min-width: 900px; max-width: 900px; }
.modal .modal-content.modal-content__form .box {height: 720px; padding: 0;}
.modal-content {
z-index: 10;
width: 50%;
position: absolute;
top: 50%;
transform: translateY( -50%); }
.modal-con {
overflow: auto;
height: 612px;
}
.modal-con .modal-con__menu {
position: absolute;
width: 18%;
height: calc( 100% - 108px );
left: 0;
padding-top: 12px;
border-right: solid 1px #E4E5ED;
background: #fff;
overflow-y: auto;
}
.modal-con .modal-con__menu li {
cursor: pointer;
padding: 14px 21px;
font-size: 14px;
font-weight: 500;
display: block;
color: #9A9BA7;
transition: all ease 0.2s;
}
.modal-con .form-step {
display: none;
width: 82%;
height: 100%;
right: 0;
float: right;
padding: 0 21px 0;
}
.modal .modal-content.modal-content__form .bottom-btn {
text-align: right;
background: #Fff;
position: absolute;
bottom: 0;
left: 0;
border-top: solid 1px #E4E5ED;
padding: 12px 24px 15px;
z-index: 1;
border-radius: 0 0 18px 18px;
float: right;
}
</style>
<body>
<div class="is-desktop">
<!------------------ 모달창--------------------------->
<div id="" class="modal" style="display: flex">
<div class="modal-background"></div>
<div class="modal-content modal-content__form" style=" overflow: unset; ">
<div class="box">
<div class="afms-header__con is-flex is-justify-content-space-between is-align-items-center" style="background: #fff;">
<div class="is-flex is-size-7 has-text-weight-medium">
<span style="color: #9A9BA7;">상단제목</span>
</div>
<span class="header-icon">
<a href="javascript:void(0);" class="close_btn modal_close has-text-black">×</a>
</span>
</div>
<article>
<div class="is-flex is-align-items-end is-justify-content-space-between py-2 px-3" style="border-bottom: solid 1px #E4E5ED; ">
<div class="cont-select2 cont-select__quantity mt-0" style="width: 80%; ">
</div>
<div class="is-flex">
<button class="apt-btn apt-btn__sky is-size-6" >버튼</button>
</div>
</div>
<div class="modal-con modal-con__quantity" style="height: 600px;">
<div class="modal-con__menu pt-0">
<article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;">
<div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end" style="color: #132997;">
<span class="is-size-6 ">111</span>
</div>
</div>
</div>
<ul class="media-content media-content__quantity" style="overflow-x: unset;">
<li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-1">1.ㄱㄴㄷ</li>
<li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-2">2.ㄹㅁㅂ</li>
<li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-3">3.ㅅㅇㅈ</li>
<li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-4">4.ㅊㅋㅌ</li>
<li class="btnQuantityScroll" data-scrolldiv="quantityScroll1-5">5.ㅍㅎ</li>
</ul>
</article>
<article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;">
<div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end" style="color: #132997;">
<span class="is-size-6 ">222</span>
</div>
</div>
</div>
<ul class="media-content media-content__quantity" style="overflow-x: unset;">
<li class="btnQuantityScroll" data-scrolldiv="quantityScroll2-1">ABC</li>
</ul>
</article>
<article class="is-relative" style=" border-bottom: solid 1px #F2F3F7;">
<div class="media-content py-4 px-3 detail_view detail_view__quantity" style="background: #f3f3f3; cursor: pointer;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end" style="color: #132997;">
<span class="is-size-6 ">333</span>
</div>
</div>
</div>
<ul class="media-content media-content__quantity" style="overflow-x: unset;">
<li class="btnQuantityScroll" data-scrolldiv="quantityScroll3-1">1234</li>
</ul>
</article>
</div>
<div class="form-step form-step__quantity form-step1 current" style="padding-bottom: 80px; display: inherit;">
<div class="field mb-0" id="quantityScroll1-1">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">1.ㄱㄴㄷ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0" id="quantityScroll1-2">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">2.ㄹㅁㅂ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0" id="quantityScroll1-3">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">3.ㅅㅇㅈ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0" id="quantityScroll1-4">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">4.ㅊㅋㅊ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0" id="quantityScroll1-5">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">5.ㅍㅎ</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset;">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0" id="quantityScroll2-1">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">123</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset; ">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
<div class="field mb-0" id="quantityScroll3-1">
<article class="is-relative" style=" border-bottom: solid 1px #7c7c7c;">
<div class="media-content py-4 detail_view" style="cursor: pointer; background: #fff!important;">
<div class="is-flex is-align-items-center is-justify-content-space-between">
<div class="con_title is-flex is-align-items-self-end">
<span class="is-size-6 ">ABC</span>
</div>
<a class="card_detail__btn card_detail__btn_quantity" id="arrowBtn">
<img src="assets/images/selecticon_arrowup.svg" alt="">
</a>
</div>
</div>
<div class="media-content media-content__detail media-content__detail_quantity" style="overflow-x: unset;">
<div style="background: grey; height: 300px;"></div>
</div>
</article>
</div>
</div>
</div>
<div class="bottom-btn p-3">
<button class="apt-btn apt-btn__grey2 is-size-6 is-justify-content-center" id="quantityCancel" style="width: 115px;">취소</button>
<button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantityEdit" style="width: 115px;">수정</button>
<button class="apt-btn apt-btn__navy on is-size-6 is-justify-content-center" id="quantitySave" style="width: 115px;">저장</button>
</div>
</article>
</div>
</div>
</div>
<!------------------ 모달창--------------------------->
</div>
</body>
<script>
//서랍메뉴 접기펼치기
$(".card_detail__btn").css("transform","rotate(0deg)");
$(".detail_view").click(function(){
var submenu = $(this).parents().children(".media-content__detail");
if( submenu.is(":visible") ){
$(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");
submenu.slideUp();
}else{
$(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");
submenu.slideDown();
}
});
//좌측 서랍메뉴 접기 펼치기
$(".detail_view.detail_view__quantity").click(function(){
var submenu = $(this).parents().children(".media-content__quantity");
if( submenu.is(":visible") ){
$(this).parent().find(".card_detail__btn").css("transform","rotate(180deg)");
$(this).css("background","#fff");
submenu.slideUp();
}else{
$(this).parent().find(".card_detail__btn").css("transform","rotate(0deg)");
$(this).css("background","#F3F3F3");
//$(this).css("transform","rotate(180deg)");
submenu.slideDown();
}
});
//좌측 탭메뉴 스크롤링
$(".btnQuantityScroll").click(function() {
//스크롤링 추가
var scrolldiv = $(this).data("scrolldiv");
var offset = $("#"+scrolldiv+"").offset(); // Contains .top and .left
if(scrolldiv == "quantityScroll1-1"){
$('.modal-con').animate({
scrollTop: 0 });
}else{
$('.modal-con').animate({
scrollTop: offset.top });
}
});
</script>
</html>
답변 2
다음처럼 hash 방식을 이용하는 방법이 있습니다.
<style>
...
.modal-con {
overflow: auto;
height: 612px;
scroll-behavior: smooth;
}
...
</style>
<script>
...
//좌측 탭메뉴 스크롤링
$(".btnQuantityScroll").click(function() {
//스크롤링 추가
var scrolldiv = $(this).data("scrolldiv");
location.hash = "#" + scrolldiv;
// var offset = $("#"+scrolldiv+"").offset(); // Contains .top and .left
// if(scrolldiv == "quantityScroll1-1"){
// $('.modal-con').animate({
// scrollTop: 0 });
// }else{
// $('.modal-con').animate({
// scrollTop: offset.top });
// }
});
</script>
감사합니다!
답변을 작성하시기 전에 로그인 해주세요.