anchor links and margins

2018-06-22 02:35:28

I'm currently building a webpage where some elements are placed on fixed positions near the top edge. So whenever I navigate to anchors, those get placed right under those fixed elements. I wonder if there's some style or other method that when navigating to a anchor, this happens with some additional offset/margin?

Example source code

<html>
<body>

<div style="position:fixed; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.
</div>

<div style="position:absolute; top:0px;">

<div>
<a name="foo" id="foo"><h2>Foo</h2></a>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores e
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
</div>

<div>
<a name="bar" id="bar"><h2>Bar</h2></a>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.   
</p>
</div>

</div>

</body>
</html>

Say this HTML is available at http://example.com/foobar.html one could link to http://example.com/foobar.html/#bar – a browser will scroll to the anchor named/id "bar". But in this example there's that 100px high fixed element, that will obstruct the upper parts of the "Bar" contents. Now I'd like to have some style/option that tells the browser, not to scroll the element to the top of the document window, but to leave a certain "scroll margin" (in this case a scroll margin of about 200px). This is not about element margins, as these influence the layout. But this is not about layout, but giving hints for the scrolling behaviour.

In order to get a cross-browser/cross-device solution where your anchor is truly invisible in the sense that it does not take up any space on the page, it is important that you format your anchor tag like this:

<a name="foo" class="top"></a>

We used a class so you can style all of your anchor tags at once, (assuming the fixed div is part of your normal page template)... you could set it as an ID as the question poses though.

And format your CSS as follows:

a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
}

Using Position: relative allows you to pull the anchor our of the normal page flow.

setting the top to a negative dimension that equals the height of your fixed element will push the content you are jumping to into full view.

Browsers such as Chrome do not respect this positioning unless the anchor actually displays. Adding content to the anchor such as   will force the anchor to display but in many instances that would create a vertical space as big as the line-height of the <a> , so it is better to set the display to block and the width and height to 0.

Here is my solution: http://jsfiddle.net/ufewB/

HTML

<div id="container">
    <div id="fixed">
        Fixed position element
        <a href="#foo" alt="foo">Jump to foo</a>   
    </div>
    <div id="spacer"></div>
    <a id="foo"></a><h2>Foo</h2>

    <p>Lorem ipsum text</p>
    <div id="spacer"></div>
</div>

CSS

#fixed {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background-color:red;
}
#spacer { height:800px; }
* { margin:0px; padding:0px; }
#container { width:960px; margin:auto; }
#foo { position:relative; top:-100px; }

Basically, I gave the <a id="foo"> </a> the CSS position:relative; top:-100px position:relative; top:-100px and I took all the elements contained inside the anchor and put them next to the anchor instead. I did this because you are in essence creating an invisible link, removing it from the normal document flow, and positioning it 100px higher than it would normally be.

Doing it this way, when the page places the hash link at the top of the page, whatever content was next to the link will be 100px lower. Additionally, another benefit of doing it this way is you don't have to mess with tweaking the flow of the document; you're just changing the flow of an invisible anchor tag, which makes maintenance much easier

链接地址: http://www.djcxy.com/p/62048.html

上一篇: 使用位置固定的问题

下一篇: 锚链接和边距