Bootstrap: anchors and body top margin/padding

I'm using Bootstrap with a global navbar fixed to the top of the page body.

    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">MyBrand</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#>Page 1</li>
                        <li><a href="#>Page 2</li>
                        <li><a href="#>Page 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

I added a 40px margin on top of the body in order the top of page content underlying not to be overlayed by the navbar.

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

Up to there, everything works fine. I also make usage of internal anchors in order to ease the navigation inside the page, using the same mechanisms Twitter used with the affix component on the Bootstrap documentation, making the user able to jump to different sections within the page (see http://twitter.github.com/bootstrap/getting-started.html)

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>

[...]

<section id="section1">
    [...]
    [...]
    [...]
</section
<section id="section2">