HTML: Making a link lead to the anchor centered in the middle of the page

html anchor center
olamundo picture olamundo · Sep 13, 2009 · Viewed 42.7k times · Source

I have a link to an anchor on my html page. When the link is clicked it causes the page to scroll to the anchor so that the anchor is at the very top of the visible part of the page. How can I make the page scroll so that the anchor will be in the middle of the page?

Answer

charles.cc.hsu picture charles.cc.hsu · Mar 18, 2015

I found a solution Anchor Links With A Fixed Header posted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.

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

then put the following css code

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

Thanks, Phillip!

Related questions

How to open link in new tab on html?

I'm working on an HTML project, and I can't find out how to open a link in a new tab without javascript. I already know that <a href="http://www.WEBSITE_NAME.com"></a> opens the …

Read More
How can I create a link to a local file on a locally-run web page?

I'd like to have an html file that organizes certain files scattered throughout my hard drive. For example, I have two files that I would link to: C:\Programs\sort.mw C:\Videos\lecture.mp4 The problem is that I'd …

Read More
Make a div into a link

I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link. I'm looking for something like <a href="…"><div> … </div&…

Read More