CSS에서 앵커의 여백을 설정하는 방법이 있습니까?

고정 헤더 높이가 50px입니다. 내 몸에는 많은 닻이 있습니다. 문제는 앵커를 가리키는 링크를 클릭하면 고정 머리글 아래에 앵커가 표시되고 50px의 내용이 손실된다는 것입니다 (머리글 아래 내용을 읽으려면 50px 위로 스크롤해야 함).CSS에서 앵커의 여백을 설정하는 방법이 있습니까?

앵커 50px에 여백을 두는 방법이 있습니까? 내 몸은 .. 스스로가 사이의 마진 상자의 많은 (div의)으로 가득합니다, 그래서 나는 장소에 50 픽셀의 빈 DIV를 넣고 뒤에 고정 할 수

HTML :

<div id="header"></div> 
<div id="content"> 
    <div class="box" id="n1"></div> 
    <div class="box" id="n2"></div> 
    <div class="box" id="n3"></div> 
</div>

CSS : 헤더가 진정 후 고정 스크롤 사업부에 앵커를 배치하는 경우

#header{ 
    height: 40px; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    position: fixed; 
    text-align: center; 
    z-index:2; 
} 

#content{ 
    padding-top: 50px; 
    margin: 0px; 
} 

.box { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align : top; 
    padding: 1.4%; /* Keep it in percent (%) */ 
    margin-bottom: 30px; 
    min-height: 200px; 
}

출처

2012-02-18 Pier-Alexandre Bouchard

고정 링크로 앵커 링크를 도울 수 있습니다. http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/ – toto

. 그런 다음 앵커가 포함 된 div는 전체 페이지 대신 스크롤됩니다. 바이올린을 방문하여 앵커 1을 클릭하십시오. 그것은 앵커 2로갑니다. 기타 등등.

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

CSS - 설정은 오버 플로우 기본 스크롤을 방지하기 위해 몸에 숨겨져. 상단 및 하단이 설정된 새 콘텐츠 영역에서 절대 위치를 사용하십시오. 이렇게하면 나머지 뷰포트 창에 맞게 늘립니다.

body { overflow: hidden; } 
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; } 
#content { 
    overflow: scroll; 
    position: absolute; 
    top: 50px; 
    bottom: 0px; 
    width: 100%; 
    border: 1px solid blue; 
}

HTML

<div id="header">header</div> 
<div id="content"> 
    <div> 
     Page Content <br /> 
     <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>     
     <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a> 
    </div> 
</div>

출처

2012-02-18 02:43:19 mrtsherman

내 초기 게시물을 업데이트했습니다. 내 코드 좀 봐 ... 오버플로 - y : 스크롤 시도했지만 여전히 작동하지 않습니다. –

오버플로 -y 모든 브라우저에서 지원되지 않습니다. –

@mrtsherman I anchor1을 클릭하면 "Anchor1"과 그 내용을 볼 필요가 있습니다. anchor2와 동일합니다 .. –

당신이 jQuery를 사용하는 경우이 기능을 사용

function scrollToAnchor() { 
    if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){ 
    var anchor = document.URL.split("#")[1]; 
    $(".jquery-anchor").each(function() { 
     if($(this).attr("name") == anchor) { 
      $("html,body").animate({ 
        scrollTop: $(this).offset().top - 50}, 
       'slow'); 
      } 
     }); 
    } 
}

후 순수 CSS 솔루션의 앵커

출처

2012-10-30 06:42:25 ndemoreau

내가 뭔가를 놓치고 있습니다. 무엇이 'scrollToAnchor()'를 호출합니까 ?? – zipzit

이 함수를 ajax에서 작동시키는 함수에 넣습니다. $ (document) .ready()를 통해 문서를로드 할 때 호출되지만 콜백을 통해 각 Ajax 라운드 트립이 끝난 후에도 호출됩니다. – ndemoreau

마침내 알아 냈습니다.실제로 나는 다음을 추가했습니다 : // 모든 앵커 클릭 차단하기 jQuery ("body"). on ("click", "a", scrollToAnchor); – zipzit

에 클래스 "jquery_anchor"를 추가를 그냥 다른 여백을 사용하여 여백 :

<style> 
.anchor { 
    margin-top: -50px; 
    margin-bottom: 50px; 
} 
</style> 

<div id="n1" class="anchor"></div> 
<div class="box"></div>

출처

2016-09-16 08:25:31 Arziel

CSS에서 앵커의 여백을 설정하는 방법이 있습니까?

답변

관련 문제