Hello, World!
이전 목록 다음
채택완료

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

itb
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 2,676

예를들어 아래 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개 / 댓글 1개

채택된 답변
+20 포인트
배배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

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>
엑엑스엠엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

원하시는 게

/page/company.php#company5

가 아니라면

/page/company.php

로 하시거나

#company5

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

AActonsoft
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

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'
      });
    }
  }
});
cuwaaang
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

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

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

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

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

답변에 대한 댓글 1개

itb
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
그페이지에 접근시

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

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