a태그로 이동시 a태그 높이값 변경할 수 있나요?
본문
예를들어 아래 li 태그를 클릭하면
<li><a href="https://itit.cafe24.com/page/company.php#company5">찾아오시는 길</a></li>
company.php에서 #company5 로 이동합니다.
그런데 이동하면 위가 좀잘려서그런데
이동 후, a태그의 높이 값을 변경시킬 수 있나요?
사실, 이방법말고
한페이지에서 이동하는 스크립트는 짰는데,
홈에서 다른 페이지로 이동 후, 스크롤을 이동하는 건 또 어려운문제더라고요..ㅠㅠ
function goToScroll(name) {
var menuHeight = document.querySelector("#header").offsetHeight;
var location = document.querySelector("[data-arti=company_" + name).offsetTop;
window.scrollTo({
top: location - menuHeight,
behavior: 'smooth'
});
}
이것을 onclick으로 넣었는데,
해당 페이지에서만 적용이되어서,
홈에서 서브페이지로 이동은 안되더라고요..
고수님들 의견부탁드려요ㅠㅠ
답변 4
css.css
#header {
background-color: silver;
}
.companies article {
border-top: 1px solid silver;
margin: 50em 0;
}
js.js
function goToScroll(name) {
var menuHeight = document.querySelector("#header").offsetHeight;
var location = document.querySelector("[data-arti=company_" + name).offsetTop;
console.log({menuHeight, location});
window.scrollTo({
top: location - menuHeight,
behavior: 'smooth'
});
}
function getHashTail(hash) {
var tail = hash.substring(hash.indexOf('_') + 1, hash.length);
return tail;
}
document.addEventListener('DOMContentLoaded', function () {
var links = document.querySelectorAll('.links [data-target]');
links.forEach((el, i) => {
var attr = el.getAttribute('data-target');
attr = getHashTail(attr);
el.addEventListener('click', function () { goToScroll(attr); }, false);
});
if (location.hash != '') {
var tail = getHashTail(location.hash)
goToScroll(tail);
}
}, false);
a.html, b.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link type="text/css" href="css.css" rel="stylesheet">
<script src="js.js"></script>
</head>
<body>
<header id="header">
<ul class="links">
<li><a data-target="company_1" href="a.html#company_1">a#company_1</a></li>
<li><a data-target="company_2" href="a.html#company_2">a#company_2</a></li>
<li><a data-target="company_3" href="a.html#company_3">a#company_3</a></li>
<li><a data-target="company_4" href="a.html#company_4">a#company_4</a></li>
<li><a data-target="company_5" href="a.html#company_5">a#company_5</a></li>
<li><a data-target="company_1" href="b.html#company_1">b#company_1</a></li>
<li><a data-target="company_2" href="b.html#company_2">b#company_2</a></li>
<li><a data-target="company_3" href="b.html#company_3">b#company_3</a></li>
<li><a data-target="company_4" href="b.html#company_4">b#company_4</a></li>
<li><a data-target="company_5" href="b.html#company_5">b#company_5</a></li>
</ul>
</header>
<section class="companies">
<article data-arti="company_1">company_1</a></article>
<article data-arti="company_2">company_2</a></article>
<article data-arti="company_3">company_3</a></article>
<article data-arti="company_4">company_4</a></article>
<article data-arti="company_5">company_5</a></article>
</section>
</body>
</html>
#company5 가 id값따라 이동한다는거고
그페이지에 어떻게 들어가든 화면을 이동시킬거면
그페이지에다가 접근시 scroll 이동하도록 javascript 해두면 되겠졍
눌렀을때만 하고싶으면 get으로 넘겨서 php랑 섞어서 해도되겠네여
그페이지에 접근시
이부분을 어떠헥 작성하졍?
a {
height: 원하시는 높이px;
}
window.addEventListener('load', function() {
var hash = window.location.hash;
if (hash) {
var element = document.querySelector(hash);
if (element) {
var menuHeight = document.querySelector("#header").offsetHeight;
var location = element.offsetTop;
window.scrollTo({
top: location - menuHeight,
behavior: 'smooth'
});
}
}
});
원하시는 게
/page/company.php#company5
가 아니라면
/page/company.php
로 하시거나
#company5
위치를 조금 위로 옮겨 보세요
답변을 작성하시기 전에 로그인 해주세요.
