앵커 링크를 링크 된 위치보다 몇 픽셀 위로 이동합니다.

이 질문을 요청 / 검색하는 가장 좋은 방법을 모르겠습니다.

앵커 링크를 클릭하면 페이지의 맨 위에 링크 된 영역이있는 페이지의 해당 섹션으로 이동합니다. 앵커 링크를 통해 페이지의 해당 부분으로 이동하고 싶지만 상단에 약간의 공간이 필요합니다. 에서와 같이 VERY TOP에서 연결된 부분으로 나를 보내지 않기를 원합니다. 100 픽셀 정도의 공간을 원합니다.

이게 말이 돼? 이게 가능해?

코드를 표시하도록 편집 됨-단지 앵커 태그 일뿐입니다.

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

이렇게하면 브라우저가 앵커로 점프하는 작업을 수행 할 수 있으며 해당 위치를 사용하여 오프셋 할 수 있습니다.

편집 1 :

@erb가 지적했듯이 이것은 해시가 변경되는 동안 페이지에있는 경우에만 작동합니다. #something이미 URL에 있는 페이지를 입력하면 위 코드에서 작동하지 않습니다. 이를 처리하는 또 다른 버전은 다음과 같습니다.

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

참고 : jQuery를 사용하려면, 당신은 단지 대체 할 수 window.addEventListener와 함께 $(window).on예이다. @Neon 감사합니다.

편집 2 :

몇몇 사람들이 지적했듯이 hashchange오프셋을 강제하는 이벤트 가 없기 때문에 동일한 앵커 링크를 연속으로 두 번 이상 클릭하면 위의 작업이 실패합니다 .

이 솔루션은 @Mave의 제안을 약간 수정 한 버전이며 단순성을 위해 jQuery 선택기를 사용합니다.

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

이 예제의 JSFiddle은 여기에 있습니다.

css로만 작업하면 고정 된 요소에 패딩을 추가 할 수 있습니다 (위의 솔루션에서와 같이) 불필요한 공백을 방지하려면 동일한 높이의 음수 여백을 추가 할 수 있습니다.

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

이것이 최선의 해결책인지 확실하지 않지만 잘 작동합니다.

더 나은 솔루션 :

<p style="position:relative;">
    <a name="anchor" style="position:absolute; top:-100px;"></a>
    I should be 100px below where I currently am!
</p>

<a>상대적으로 배치 된 개체 내부에 절대 위치로 태그를 배치하기 만하면 됩니다.

페이지에 들어갈 때 또는 페이지 내 해시 변경을 통해 작동합니다.

이에 대한 2020 년 답은 다음과 같습니다.

#anchor {
  scroll-margin-top: 100px;
}

널리 지원 되기 때문입니다 !

최고의 솔루션

<span class="anchor" id="section1"></span>
<div class="section"></div>

<span class="anchor" id="section2"></span>
<div class="section"></div>

<span class="anchor" id="section3"></span>
<div class="section"></div>

<style>
.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}
</style>

이것은 jQuery없이 및 페이지로드시 작동합니다.

(function() {
    if (document.location.hash) {
        setTimeout(function() {
            window.scrollTo(window.scrollX, window.scrollY - 100);
        }, 10);
    }
})();

요소에 연결 한 다음 순수한 CSS를 사용하여 해당 요소를 페이지 상단에서 임의의 거리에 '위치'하려면을 사용해야 padding-top합니다. 이렇게하면 요소가 여전히 창 상단에 배치됩니다. 뷰포트 상단에서 약간 떨어진 위치에 표시됩니다 . 예를 들면 다음과 같습니다.

<a href="#link1">Link one</a>
<a href="#link2">Link two</a>

<div id="link1">
    The first.
</div>

<div id="link2">
    The second.
</div>

CSS :

div {
    /* just to force height, and window-scrolling to get to the elements.
       Irrelevant to the demo, really */
    margin-top: 1000px;
    height: 1000px;
}

#link2 {
    /* places the contents of the element 100px from the top of the view-port */
    padding-top: 100px;
}

JS Fiddle 데모 .

일반 JavaScript 접근 방식을 사용하려면 :

function addMargin() {
    window.scrollTo(0, window.pageYOffset - 100);
}

window.addEventListener('hashchange', addMargin);

JS Fiddle 데모 .

이것은 작동합니다.

    $(document).ready(function () {
    $('a').on('click', function (e) {
        // e.preventDefault();

        var target = this.hash,
            $target = $(target);

       $('html, body').stop().animate({
        'scrollTop': $target.offset().top-49
    }, 900, 'swing', function () {
    });

        console.log(window.location);

        return false;
    });
});

.top-49를 앵커 링크에 맞는 것으로 변경하십시오.

다음과 같은 명시 적 앵커 이름을 사용하는 경우

<a name="sectionLink"></a>
<h1>Section<h1>

그런 다음 CSS에서 간단히 설정할 수 있습니다.

A[name] {
    padding-top:100px;
}

이것은 HREF 앵커 태그가 NAME 속성도 지정하지 않는 한 작동합니다.

Eric의 대답은 훌륭하지만 실제로는 시간 초과가 필요하지 않습니다. jQuery를 사용하는 경우 페이지가로드 될 때까지 기다릴 수 있습니다. 따라서 코드를 다음과 같이 변경하는 것이 좋습니다.

// The function actually applying the offset
function offsetAnchor() {
    if (location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
$(window).on("hashchange", function () {
    offsetAnchor();
});

// Let the page finish loading.
$(document).ready(function() {
    offsetAnchor();
});

이것은 또한 우리가 임의의 요소를 제거합니다.

이 코드를 시도하면 링크를 클릭했을 때 이미 부드러운 애니메이션이 있습니다.

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 100
    }, 500);
});

가장 쉬운 솔루션 :

CSS

#link {
    top:-120px; /* -(some pixels above) */
    position:relative;
    z-index:5;
}

HTML

<body>
    <a href="#link">Link</a>
    <div>
        <div id="link"></div> /*this div should placed inside a target div in the page*/
        text
        text
        text
    <div>
</body>

Thomas의 솔루션 변형 : CSS 요소> 요소 선택자 는 여기에서 편리 할 수 ​​있습니다.

CSS

.paddedAnchor{
  position: relative;
}
.paddedAnchor > a{
  position: absolute;
  top: -100px;
}

HTML

<a href="#myAnchor">Click Me!</a>

<span class="paddedAnchor"><a name="myAnchor"></a></span>

링크를 클릭하면 클래스가있는 요소가있는 곳 어디에서나 스크롤 위치가 100px 위로 이동합니다. paddedAnchor .

비 IE 브라우저 및 버전 9의 IE에서 지원됩니다. IE 7 및 8에서 지원 <!DOCTYPE>하려면 a 를 선언해야합니다.

나는 나 자신을위한 쉬운 해결책을 찾았습니다. 여백 상단이 15px입니다.

HTML

<h2 id="Anchor">Anchor</h2>

CSS

h2{margin-top:-60px; padding-top:75px;}

CSS 만 사용하고 이전에 덮고 클릭 할 수없는 콘텐츠에 문제가 없습니다 (이 점은 포인터 이벤트 : 없음).

CSS

.anchored::before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 100px;
    margin-top: -100px;
}

HTML

<a href="#anchor">Click me!</a>
<div style="pointer-events:none;">
<p id="anchor" class="anchored">I should be 100px below where I currently am!</p>
</div>

이것을 스타일에 넣으십시오.

.hash_link_tag{margin-top: -50px; position: absolute;}

div링크 앞에 별도의 태그 에이 클래스를 사용 합니다. 예 :

<div class="hash_link_tag" id="link1"></div> 
<a href="#link1">Link1</a>

또는 에코 링크 태그에 다음 PHP 코드를 사용하십시오.

function HashLinkTag($id)
{
    echo "<div id='$id' class='hash_link_tag'></div>";
}

나는 이것이 조금 늦었다는 것을 알고 있지만 Bootstrap의 Scrollspy를 사용하는 경우 코드에 넣을 매우 중요한 것을 발견했습니다. ( http://getbootstrap.com/javascript/#scrollspy )

이것은 나를 몇 시간 동안 미치게 만들었다.

스크롤 스파이의 오프셋은 window.scrollY와 일치해야합니다. 그렇지 않으면 다음과 같은 위험이 따릅니다.

1. 스크롤 할 때 이상한 깜박임 효과 얻기
2. 앵커를 클릭하면 해당 섹션에 도착하지만 스크롤 스파이는 사용자가 그 위에있는 섹션이라고 가정합니다.

 var body = $('body');
    body.scrollspy({
        'target': '#nav',
        'offset': 100 //this must match the window.scrollY below or you'll have a bad time mmkay
});

$(window).on("hashchange", function () {
        window.scrollTo(window.scrollX, window.scrollY - 100);
});

@Eric Olson 솔루션을 기반으로 특별히 가고 싶은 앵커 요소를 포함하도록 약간 수정하십시오.

// Function that actually set offset
function offsetAnchor(e) {
    // location.hash.length different to 0 to ignore empty anchor (domain.me/page#)
    if (location.hash.length !== 0) {
        // Get the Y position of the element you want to go and place an offset
        window.scrollTo(0, $(e.target.hash).position().top - 150);
    }
}

// Catch the event with a time out to perform the offset function properly
$(document).on('click', 'a[href^="#"]', function (e) {
    window.setTimeout(function () {
        // Send event to get the target id later
        offsetAnchor(e);
    }, 10);
});

나는 단지 같은 문제가 있습니다. 내비게이션이 픽스로 설정되어 있고 내비게이션 아래에서 앙코르가 시작되기를 원합니다. window.addEventListener...내 페이지를 설정했기 때문에 나를 위해 작동하지 않는 해결책은 대신scroll-behavior:smooth 오프셋을 설정했습니다. 앙코르로 스크롤합니다. setTimeout()작품은 시간을 끝으로 스크롤을 위해 anough 경우하지만 여전히 좋은 찾고 없습니다. 내 솔루션 있도록하여, 앙코르에 상정 절대 사업부를 추가하는 것이 었습니다 height:[the height of the nav]와 bottom:100%. 이 경우이 div는 앙코르 요소의 상단에서 끝났고, 앙코르가 스크롤 할 위치에서 시작합니다. 이제 내가하는 모든 일은 앙코르 링크를이 절대 div 및 wor 완료 :)

html,body{
    margin:0;
    padding:0;
    scroll-behavior:smooth;
}

nav {
    height:30px;
    width:100%;
    font-size:20pt;
    text-align:center;
    color:white;
    background-color:black;
    position:relative;
}

#my_nav{
    position:fixed;
    z-index:3;
}
#fixer_nav{
    position:static;
}

#angkor{
    position:absolute;
    bottom:100%;
    height:30px;
}

<nav id="my_nav"><a href="#angkor">fixed position nav<a/></nav>
<nav id="fixer_nav"></nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.
</p>

<nav><div id="angkor"></div>The angkor</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.

</p>

나는 비슷한 문제에 직면했고 다음 코드를 사용하여 해결했습니다.

$(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        var desiredHeight = $(window).height() - 577;
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

<a href="#anchor">Click me!</a>

<div style="margin-top: -100px; padding-top: 100px;" id="anchor"></div>
<p>I should be 100px below where I currently am!</p>