a태그로 이동시 a태그 높이값 변경할 수 있나요? 채택완료
예를들어 아래 li 태그를 클릭하면
<li><a href="https://itit.cafe24.com/page/company.php#company5">찾아오시는 길</a></li>
company.php에서 #company5 로 이동합니다.
그런데 이동하면 위가 좀잘려서그런데
이동 후, a태그의 높이 값을 변경시킬 수 있나요?
사실, 이방법말고
한페이지에서 이동하는 스크립트는 짰는데,
홈에서 다른 페이지로 이동 후, 스크롤을 이동하는 건 또 어려운문제더라고요..ㅠㅠ
</p>
<p> function goToScroll(name) {</p>
<p> var menuHeight = document.querySelector("#header").offsetHeight;</p>
<p> var location = document.querySelector("[data-arti=company_" + name).offsetTop;</p>
<p> </p>
<p> window.scrollTo({</p>
<p> top: location - menuHeight,</p>
<p> behavior: 'smooth'</p>
<p> });</p>
<p> }</p>
<p>이것을 onclick으로 넣었는데,
해당 페이지에서만 적용이되어서,
홈에서 서브페이지로 이동은 안되더라고요..
고수님들 의견부탁드려요ㅠㅠ
답변 4개
css.css
</p>
<p>#header {
background-color: silver;
}
.companies article {
border-top: 1px solid silver;
margin: 50em 0;
}</p>
<p>
js.js
</p>
<p>function goToScroll(name) {
var menuHeight = document.querySelector("#header").offsetHeight;
var location = document.querySelector("[data-arti=company_" + name).offsetTop;
console.log({menuHeight, location});</p>
<p> window.scrollTo({
top: location - menuHeight,
behavior: 'smooth'
});
}</p>
<p> </p>
<p>function getHashTail(hash) {
var tail = hash.substring(hash.indexOf('_') + 1, hash.length);</p>
<p> return tail;
}</p>
<p> </p>
<p>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);
});</p>
<p> if (location.hash != '') {
var tail = getHashTail(location.hash)
goToScroll(tail);
}
}, false);</p>
<p>
a.html, b.html
</p>
<p><!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></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
원하시는 게
/page/company.php#company5
가 아니라면
/page/company.php
로 하시거나
#company5
위치를 조금 위로 옮겨 보세요
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p>a {
height: 원하시는 높이px;
}</p>
<p>
</p>
<p>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'
});
}
}
});</p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
이부분을 어떠헥 작성하졍?