HTML : 링크를 페이지 중간에 중앙에있는 앵커로 연결합니다.

StackOverflow https://stackoverflow.com/questions/1418838

  •  07-07-2019
  •  | 
  •  

문제

HTML 페이지에 앵커에 대한 링크가 있습니다. 링크가 클릭되면 앵커가 페이지의 보이는 부분의 맨 위에 있도록 페이지가 앵커로 스크롤하게됩니다. 앵커가 페이지 중간에 있도록 페이지 스크롤을 어떻게 만들 수 있습니까?

도움이 되었습니까?

해결책 3

순수한 HTML CSS에서는이 작업을 수행하는 직접적인 방법이 없습니다. 요소의 상단 위치를 가져 와서 페이지의 상단 위치를 해당 요소의 위치에 페이지 높이의 절반으로 설정함으로써 JS를 사용하지만 가능합니다.

다른 팁

해결책을 찾았습니다 고정 헤더와 앵커 링크 Phillip에 의해 게시 된 그는 웹 디자이너입니다. Phillip은 새로운 빈 스팬을 앵커 위치로 추가했습니다.

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

그런 다음 다음 CSS 코드를 넣으십시오

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

고마워요, 필립!

HTML :

<a id="anchor">NEWS</a>

CSS :

#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}

나를 위해 잘 일했습니다

장소 a <span class="anchor" id="X"> 그런 다음 스타일 anchor 클래스와 같은 수업 : 

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

와 함께 -50vh 앵커가 화면 중앙에 스크롤됩니다.

빈 공간이 없으면 다음과 같이하십시오.

<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

그러나 여전히 JavaScript에서 높이를 규제해야합니다.

실제로 상단에 원하는 페이지의 일부를 결정하고 대신 앵커를 거기에 놓습니다. 브라우저가 앵커를 해석하는 방식을 바꿀 수는 없습니다. 적어도 사용자를 화나게하지 않고는 아닙니다.

"페이지의 중간"은 주어진 시간에 사용자 화면 및 창의 크기와 관련이 있으므로 수직 화면을 얻기 위해 순수한 HTML/CSS에는 방법이 없으므로이를 달성하기 위해 JavaScript를 사용해야합니다. 너비.

연장 charles.cc.hsu의 대답, 우리는 vh CSS 장치는 뷰포트의 높이와 관련이 있습니다.

HTML :

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

CSS :

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vh IE9 이상에서 지원되므로 사용하기에 안전합니다.

대상 앵커 태그의 페이지 높이의 절반에 해당하는 음수 마진 (또는 다른 위치 지정 방법)을 배치하려고합니다.

Firefox는 이름이 지정된 앵커에 패딩 탑 속성을 설정하는 것을 지원합니다. 거기에서 브라우저의 크기가 포함 된 JavaScript를 통해 쿠키를 설정하고 서버 측면에 따라 패딩 탑을 조정할 수 있습니다. 최종 사용자에게는 순수한 HTML/CSS처럼 보일지 모르지만 NOAM은 브라우저의 크기를 얻으려면 약간의 JS가 필요하다는 점에서 정확합니다. 약간의 강요 없이이 정보를 제공하지 않기 때문입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top