그누보드 QA - a태그로 이동시 a태그 높이값 변경할 수 있나요?

a태그로 이동시 a태그 높이값 변경할 수 있나요?

itb 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.09.11 15:33:48 1632 (121.♡.♡.16)

답변 4

본문

예를들어 아래 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으로 넣었는데,

해당 페이지에서만 적용이되어서,

홈에서 서브페이지로 이동은 안되더라고요..

고수님들 의견부탁드려요ㅠㅠ

#javascript

답변 4

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-09-11 16:37:14 119.♡.♡.81

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>

cuwaaang 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-09-11 15:49:10 121.♡.♡.133

#company5 가 id값따라 이동한다는거고

그페이지에 어떻게 들어가든 화면을 이동시킬거면

그페이지에다가 접근시 scroll 이동하도록 javascript 해두면 되겠졍

눌렀을때만 하고싶으면 get으로 넘겨서 php랑 섞어서 해도되겠네여

↳ itb 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-09-11 16:01:31121.♡.♡.16

그페이지에 접근시

이부분을 어떠헥 작성하졍?

액트온 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-09-11 18:52:12 183.♡.♡.26


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'
      });
    }
  }
});