SIR
목록으로
이전글 다음글

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

itb
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 2,606
답변 4
목록

예를들어 아래 li 태그를 클릭하면

<li><a href="https://itit.cafe24.com/page/company.php#company5">찾아오시는 길</a></li>

company.php에서 #company5 로 이동합니다.

그런데 이동하면 위가 좀잘려서그런데

이동 후, a태그의 높이 값을 변경시킬 수 있나요?

사실, 이방법말고

한페이지에서 이동하는 스크립트는 짰는데,

홈에서 다른 페이지로 이동 후, 스크롤을 이동하는 건 또 어려운문제더라고요..ㅠㅠ

Copy 
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개

채택된 답변
+20 포인트

css.css

Copy 
#header {
    background-color: silver;
}
.companies article {
    border-top: 1px solid silver;
    margin: 50em 0;
}

js.js

Copy 
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

Copy 
<!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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

원하시는 게

/page/company.php#company5

가 아니라면

/page/company.php

로 하시거나

#company5

위치를 조금  위로 옮겨 보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
a {
  height: 원하시는 높이px;
}
Copy 
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'
      });
    }
  }
});
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

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

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

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그페이지에 접근시

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

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고