특정 메뉴를 클릭하면, 페이지 내 지정한 위치로 부드럽게 이동할 수 있도록 구성된 소스코드입니다.
원페이지 구조에서 주요 콘텐츠로 빠르게 이동할 때 유용하게 활용할 수 있어요.
홈페이지(메인 페이지)에 섹션 이동 설정하기
섹션의 고유 ID를 확인해 주세요.
① 홈페이지에서 해당 섹션으로 이동
② 마우스 우클릭하고 검사(inspect) 실행
③ 강조 표시된 부분에서 상위로 이동하여 <section data-section-id= 찾기
④ <section data-section-id=”6806f7a4e2cddc81e4026f19” ….>에서 따옴표(” “) 안의 값만 더블 클릭하여 복사
섹션마다 section data-section-id가 다르므로 실제 사이트의 data-section-id 값을 확인해 주세요.
머리글 메뉴를 추가해 주세요.
① [식스샵 프로 > 웹사이트 > 테마]에서 디자인 편집하기 클릭 후 [섹션 > 헤더 영역 > 헤더] 또는 페이지 프리뷰의 헤더 영역을 클릭
② [메뉴] 탭의 + 아이콘을 클릭하여 노출될 메뉴의 이름만 설정
헤더 영역에 HTML 섹션을 추가하고, 소스코드를 입력해 주세요.
•
name
에서 추가한 메뉴의 메뉴 이름을 그대로 입력해 주세요.예시) 원페이지1, 원페이지2, 원페이지3
•
sectionId
에서 확인한 섹션 아이디를 각 메뉴에 맞게 입력해 주세요.예시) 6806f7a4e2cddc81e4026f19
<script>
// MENU_CONFIG 항목은 메뉴 이름과 각 메뉴가 이동할 섹션의 ID를 설정하는 부분입니다.
const MENU_CONFIG = {
'/': {
menuList: [
{ name: '원페이지1', sectionId: '67feed7af306761f4e16a690' },
{ name: '원페이지2', sectionId: '67feed7af306761f4e16a692' },
{ name: '원페이지3', sectionId: '67feed7af306761f4e16a696' },
]
}
};
function findConfigAndItemByName(menuText) {
for (const [path, config] of Object.entries(MENU_CONFIG)) {
const index = config.menuList.findIndex(item => item.name === menuText);
if (index !== -1) {
return { path, item: config.menuList[index], index };
}
}
return null;
}
function getHeaderOffset() {
const header = document.querySelector('#header');
return header?.getBoundingClientRect().height || 0;
}
function setupScroll(menuButtons, isMobile = false) {
const currentPath = window.location.pathname;
const headerOffset = getHeaderOffset();
menuButtons.forEach((menu) => {
const text = menu.textContent.trim();
const result = findConfigAndItemByName(text);
if (!result) return;
const { path, item, index } = result;
menu.addEventListener('click', () => {
const closeSidebar = () => {
if (isMobile) {
document.querySelector('[aria-label="사이드바 닫기"]')?.click();
}
};
if (currentPath === path && item.sectionId) {
const section = document.querySelector(`[data-section-id="${item.sectionId}"]`);
if (section) {
const position = section.getBoundingClientRect().top + window.pageYOffset - headerOffset;
window.scrollTo({ top: position, behavior: 'smooth' });
closeSidebar();
return;
}
}
if (item.sectionId && currentPath !== path) {
window.location.href = `${path}?section=${index}`;
closeSidebar();
return;
}
if (item.altUrl) {
window.location.href = item.altUrl;
closeSidebar();
}
});
});
}
function autoScrollToSectionByQuery() {
const currentPath = window.location.pathname;
const config = MENU_CONFIG[currentPath]?.menuList;
if (!config) return;
const headerOffset = getHeaderOffset();
const sectionQuery = new URLSearchParams(window.location.search).get('section');
const index = parseInt(sectionQuery);
const item = config?.[index];
if (item?.sectionId) {
const section = document.querySelector(`[data-section-id="${item.sectionId}"]`);
if (section) {
const position = section.getBoundingClientRect().top + window.pageYOffset - headerOffset;
window.scrollTo({ top: position, behavior: 'smooth' });
}
}
}
autoScrollToSectionByQuery();
new MutationObserver(() => {
const desktopButtons = document.querySelectorAll('[class*="Gnb_primary-menu-list"] button, [class*="MegaMenu_sub-menu-list"] button');
if (desktopButtons.length) setupScroll(desktopButtons, false);
}).observe(document.body, { childList: true, subtree: true });
new MutationObserver(() => {
const primaryButtons = document.querySelectorAll(
'ul[class*="Sidebar_primary-menu-list"] button[class*="TextButton_button"]'
);
if (primaryButtons.length) setupScroll(primaryButtons, true);
}).observe(document.body, { childList: true, subtree: true });
new MutationObserver(() => {
const allMobileButtons = document.querySelectorAll(
'[class*="Sidebar_menu-list-wrapper"] button[class*="TextButton_button"]'
);
if (allMobileButtons.length) setupScroll(allMobileButtons, true);
}).observe(document.body, { childList: true, subtree: true });
</script>
HTML
복사
하위 메뉴를 활용한 섹션 이동 설정하기
섹션의 고유 ID를 확인해 주세요.
① 섹션의 고유 ID를 복사할 페이지에서 해당 섹션으로 이동
② 마우스 우클릭하고 검사(inspect) 실행
③ 강조 표시된 부분에서 상위로 이동하여 <section data-section-id= 찾기
④ <section data-section-id=”6806f7a4e2cddc81e4026f19” ….>에서 따옴표(” “) 안의 값만 더블 클릭하여 복사
섹션마다 section data-section-id가 다르므로 실제 사이트의 data-section-id 값을 확인해 주세요.
원페이지로 활용할 페이지의 하위 주소를 확인해 주세요.
[디자인 에디터에서 확인하기]
페이지 메뉴에서 하위 주소를 확인할 페이지의 오른쪽 •••를 클릭하고, 설정 메뉴에서 하위 주소를 확인해 주세요.
기존에 생성된 하위 주소를 그대로 복사해도 되지만, 영어 소문자, 숫자, -, _ 를 사용하여 직접 입력할 수 있어요. (최대 50자, 공백 제외)
[웹사이트에서 확인하기]
웹사이트에서 해당 페이지로 이동하고, 주소창에서 하위 주소를 확인해 주세요.
(예시) 스토어ID.sixshop.site/collection_list
하위 메뉴를 추가해 주세요.
① [식스샵 프로 > 웹사이트 > 테마]에서 디자인 편집하기 클릭 후 [섹션 > 헤더 영역 > 헤더] 또는 페이지 프리뷰의 헤더 영역을 클릭
② [메뉴] 탭의 + 아이콘을 클릭하여 노출될 메뉴의 이름만 설정
③ [헤더 > 메뉴]에서 상위 메뉴 하단에 하위 메뉴를 드래그하여 밀어 넣는 방식으로 설정
헤더 영역에 HTML 섹션을 추가하고, 소스코드를 입력해 주세요.
•
/페이지 하위 주소
에서 확인한 하위 주소를 입력해 주세요.예시) /collection_list
•
name
에서 추가한 메뉴의 메뉴 이름을 그대로 입력해 주세요.예시) 콜렉션1, 콜렉션2
•
sectionId
에서 확인한 section data-section-id를 각 메뉴에 맞게 입력해 주세요.예시) 6806f7a4e2cddc81e4026f19
<script>
// MENU_CONFIG 항목은 메뉴 이름과 각 메뉴가 이동할 섹션의 ID를 설정하는 부분입니다.
const MENU_CONFIG = {
'/페이지 하위 주소': {
menuList: [
{ name: '콜렉션1', sectionId: '67feed7af306761f4e16a6a6' },
{ name: '콜렉션2', sectionId: '6806f273f306761f4e2991c5' }
]
}
};
function findConfigAndItemByName(menuText) {
for (const [path, config] of Object.entries(MENU_CONFIG)) {
const index = config.menuList.findIndex(item => item.name === menuText);
if (index !== -1) {
return { path, item: config.menuList[index], index };
}
}
return null;
}
function getHeaderOffset() {
const header = document.querySelector('#header');
return header?.getBoundingClientRect().height || 0;
}
function setupScroll(menuButtons, isMobile = false) {
const currentPath = window.location.pathname;
const headerOffset = getHeaderOffset();
menuButtons.forEach((menu) => {
const text = menu.textContent.trim();
const result = findConfigAndItemByName(text);
if (!result) return;
const { path, item, index } = result;
menu.addEventListener('click', () => {
const closeSidebar = () => {
if (isMobile) {
document.querySelector('[aria-label="사이드바 닫기"]')?.click();
}
};
if (currentPath === path && item.sectionId) {
const section = document.querySelector(`[data-section-id="${item.sectionId}"]`);
if (section) {
const position = section.getBoundingClientRect().top + window.pageYOffset - headerOffset;
window.scrollTo({ top: position, behavior: 'smooth' });
closeSidebar();
return;
}
}
if (item.sectionId && currentPath !== path) {
window.location.href = `${path}?section=${index}`;
closeSidebar();
return;
}
if (item.altUrl) {
window.location.href = item.altUrl;
closeSidebar();
}
});
});
}
function autoScrollToSectionByQuery() {
const currentPath = window.location.pathname;
const config = MENU_CONFIG[currentPath]?.menuList;
if (!config) return;
const headerOffset = getHeaderOffset();
const sectionQuery = new URLSearchParams(window.location.search).get('section');
const index = parseInt(sectionQuery);
const item = config?.[index];
if (item?.sectionId) {
const section = document.querySelector(`[data-section-id="${item.sectionId}"]`);
if (section) {
const position = section.getBoundingClientRect().top + window.pageYOffset - headerOffset;
window.scrollTo({ top: position, behavior: 'smooth' });
}
}
}
autoScrollToSectionByQuery();
new MutationObserver(() => {
const desktopButtons = document.querySelectorAll('[class*="Gnb_primary-menu-list"] button, [class*="MegaMenu_sub-menu-list"] button');
if (desktopButtons.length) setupScroll(desktopButtons, false);
}).observe(document.body, { childList: true, subtree: true });
new MutationObserver(() => {
const primaryButtons = document.querySelectorAll(
'ul[class*="Sidebar_primary-menu-list"] button[class*="TextButton_button"]'
);
if (primaryButtons.length) setupScroll(primaryButtons, true);
}).observe(document.body, { childList: true, subtree: true });
new MutationObserver(() => {
const allMobileButtons = document.querySelectorAll(
'[class*="Sidebar_menu-list-wrapper"] button[class*="TextButton_button"]'
);
if (allMobileButtons.length) setupScroll(allMobileButtons, true);
}).observe(document.body, { childList: true, subtree: true });
</script>
HTML
복사
두 가지 방식 모두 활용하기
<script>
// MENU_CONFIG 항목은 메뉴 이름과 각 메뉴가 이동할 섹션의 ID를 설정하는 부분입니다.
const MENU_CONFIG = {
'/': {
menuList: [
{ name: '원페이지1', sectionId: '67feed7af306761f4e16a690' },
{ name: '원페이지2', sectionId: '67feed7af306761f4e16a692' },
{ name: '원페이지3', sectionId: '67feed7af306761f4e16a696' },
]
},
'/collection_list': {
menuList: [
{ name: '콜렉션1', sectionId: '67feed7af306761f4e16a6a6' },
{ name: '콜렉션2', sectionId: '6806f273f306761f4e2991c5' }
]
}
};
function findConfigAndItemByName(menuText) {
for (const [path, config] of Object.entries(MENU_CONFIG)) {
const index = config.menuList.findIndex(item => item.name === menuText);
if (index !== -1) {
return { path, item: config.menuList[index], index };
}
}
return null;
}
function getHeaderOffset() {
const header = document.querySelector('#header');
return header?.getBoundingClientRect().height || 0;
}
function setupScroll(menuButtons, isMobile = false) {
const currentPath = window.location.pathname;
const headerOffset = getHeaderOffset();
menuButtons.forEach((menu) => {
const text = menu.textContent.trim();
const result = findConfigAndItemByName(text);
if (!result) return;
const { path, item, index } = result;
menu.addEventListener('click', () => {
const closeSidebar = () => {
if (isMobile) {
document.querySelector('[aria-label="사이드바 닫기"]')?.click();
}
};
if (currentPath === path && item.sectionId) {
const section = document.querySelector(`[data-section-id="${item.sectionId}"]`);
if (section) {
const position = section.getBoundingClientRect().top + window.pageYOffset - headerOffset;
window.scrollTo({ top: position, behavior: 'smooth' });
closeSidebar();
return;
}
}
if (item.sectionId && currentPath !== path) {
window.location.href = `${path}?section=${index}`;
closeSidebar();
return;
}
if (item.altUrl) {
window.location.href = item.altUrl;
closeSidebar();
}
});
});
}
function autoScrollToSectionByQuery() {
const currentPath = window.location.pathname;
const config = MENU_CONFIG[currentPath]?.menuList;
if (!config) return;
const headerOffset = getHeaderOffset();
const sectionQuery = new URLSearchParams(window.location.search).get('section');
const index = parseInt(sectionQuery);
const item = config?.[index];
if (item?.sectionId) {
const section = document.querySelector(`[data-section-id="${item.sectionId}"]`);
if (section) {
const position = section.getBoundingClientRect().top + window.pageYOffset - headerOffset;
window.scrollTo({ top: position, behavior: 'smooth' });
}
}
}
autoScrollToSectionByQuery();
new MutationObserver(() => {
const desktopButtons = document.querySelectorAll('[class*="Gnb_primary-menu-list"] button, [class*="MegaMenu_sub-menu-list"] button');
if (desktopButtons.length) setupScroll(desktopButtons, false);
}).observe(document.body, { childList: true, subtree: true });
new MutationObserver(() => {
const primaryButtons = document.querySelectorAll(
'ul[class*="Sidebar_primary-menu-list"] button[class*="TextButton_button"]'
);
if (primaryButtons.length) setupScroll(primaryButtons, true);
}).observe(document.body, { childList: true, subtree: true });
new MutationObserver(() => {
const allMobileButtons = document.querySelectorAll(
'[class*="Sidebar_menu-list-wrapper"] button[class*="TextButton_button"]'
);
if (allMobileButtons.length) setupScroll(allMobileButtons, true);
}).observe(document.body, { childList: true, subtree: true });
</script>
HTML
복사
HTML 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기