jquery 특정 클래스 위치를 찾아서 해당 위치로 스크롤 이동하기

jquery 특정 클래스 위치를 찾아서 해당 위치로 스크롤 이동하기

jquery 특정 클래스 위치를 찾아서 해당 위치로 스크롤 이동하기

jquery swiper를 이용해서 카테고리를 만들게 되었습니다. 

 

어찌어찌하여 구현은 했는데 해당 카테고리에서는 selected 가 되어야 하기도 하고

 

해당 영역이 바로 보여져아 하는 상황입니다. 

 

프로그램은 카페24 쇼핑몰을 이용하다보니 원하는대로 프로그래밍이 어렵네요.

 

여기저기 찾아보다가 jquery offset() 함수를 이용하면 해당 위치를  알수가 있더군요.

 

그래서 일단 적용을 해보았습니다. 

 

var scrollLeft = $(".category-menu .selected").offset().left;

window.alert(scrollLeft); // 콘솔확인이 귀찮아서 주로 alert 창으로 확인합니다. ㅎㅎ

 

해당 함수 위치가 정확하게 나오네요. 소수점으로 .xxxxxxxx 이렇게 나옵니다. 

 

굳이 소수점까지는 필요가 없으니 Ceil함수로 일단 자릅니다. 

 

var scrollLeft = Math.Ceil($(".category-menu .selected").offset().left); 

 

일단 잘랐으니 해당 위치로 스크롤을 옮겨야 하는데

 

기준점도 찾아줘야죠. 

 

var _scrollX = $(".category-menu").scrollLeft();

 

이제 기준점과 움직일 좌표는 다 찾았습니다. 

 

해당 위치로 옮겨주면 끝나겠네요.

 

$(".category-menu").scrollLeft(_scrollX + scrollLeft);

 

계산을 칼같이 하는 컴퓨터니 너무 딱 달라붙어서 보기가 안좋아요.

 

왼쪽 여백을 10px만 줬습니다. 

 

$(".category-menu").scrollLeft(_scrollX + scrollLeft -10);

 

원하는대로 해당 클래스로 바로 이동을 하네요. 

 

정리하면 아래와 같습니다. 

1. 찾고자 하는 클래스의 위치를 찾습니다. (저는 가로위치가 필요해서 가로로 찾았어요.)

2. 시작할 위치를 찾아줍니다. 

3. 해당 클래스의 처음 위치에서 원하는 클래스의 위치로 더하기를 해서 이동을 시켜줍니다. 

 

$(function(){

    var scrollLeft = Math.Ceil($(".category-menu .selected").offset().left); 

    var _scrollX = $(".category-menu").scrollLeft();

    $(".category-menu").scrollLeft(_scrollX + scrollLeft -10);

});

 

가로 이동이라 left 관련 함수를 줬구요,

세로나 다른 부분으로 이동이 필요하시면 해당 함수를 적용하면 됩니다.