How to set the top margin of the body?

Question

I've been struggling thinking of the context of this question, I'll try do my best!

I'm working on a page which I set its nav position to fixed so it stick to the screen while scrolling, and set the href attributes of the a elements to some Ids, so the user can walk through the page by clicking the nav links. The problem is when I click the link which goes to the first part of the page, its content become hidden behind the nav bar. So I thought I may have to define new "coordinates" to the page to resettle its elements:

The markup of the nav bar:

    <nav id="navbar">
        <ul id="navItems">
            <li><a id="wel">Welcome</a></li>
            <li><a id="SendMsg">Send me a message</a></li>
            <li><a id="myResume">My Resume</a></li>
        </ul>
    </nav>

The markup of the very first content:

<div class="Mask1"></div>
<div id="intro">
    <div id="name">
        <h1 id="moh">Mohamed Ahmed Eshawaf
        </h1>
    </div>
    <br />
    <div id="pos">
        <h3>.NET Developer</h3>
    </div>
    <br />
    <div id="pos2">
        <h3>Web Designer</h3>
    </div>
    <br />


    <div id="pos3">
            <p style="font-size:24pt">
Some paragraph here!                   
        </p>
    </div>
</div> 

CSS:

#navbar {
    background-color: #019AA4;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    margin: 0 auto;
    width: 1000px;
    height: 50px;
    position: fixed;
    right: 13%;
    top: 0px;
    z-index: 888;
    display: block;
}

ul#navItems li {
    float: left;
    line-height: 48px;
    margin-right: 30px;
}

#navItems {
    position: absolute;
    top: 0px;
    right: 150px;
    list-style-type: none;
    width: 615px;
    height: 50px;
    margin: 0 auto;
}

I used jQuery code like that to walk through the page:

 $("#wel").click(function () {
                $('html, body').animate({
                    scrollTop: $(".Mask1").offset().top
                }, 2000);

this is my last try code, which I added a div tag with id "mask" and set its width to 50px, so rather linking the original content I linked to this pseudo element.

.Mask1
{
    width:50px;
}

I hope my problem is clear now, let me know please if it's not. My problem is: when I click the link Welcome in the navigation bar my name (the element with id moh) becomes hidden behind it, I want to position it directly under the navbar. *You can suggest better question wording.

Answer 1

You can use this directly, no need for a .Mask1

$("#wel").click(function () {
    $('html, body').animate({scrollTop: 0}, 2000);
});

You'll also need to provide some margin at the top of #intro (eg. if the navbar is 50px tall, then #intro { margin-top: 50px; }) so that the content is not hidden.

Also, it is usually a good practice to provide a MWE, a minimal working example (https://jsfiddle.net/ is a quite nice site) when asking a question like this.

EDIT: If it is one behavior from a specific site that you want, you can usually inspect the site itself. The specific code sample (from http://dmitry-pavlov.com/js/config.js) is CCA 3.0 by html5up as you can see in the header, so if you want to just copy&paste, add attribution as per http://html5up.net/license.

The original code:

    jQuery('a').click(function(e) {
        var t = jQuery(this), h = t.attr('href'), article;

        if (h.charAt(0) == '#' && h.length > 1 && (article = jQuery('article#' + h.substring(1))).length > 0)
        {
            var pos = Math.max(article.parent().offset().top - _nav.height() + 15, 0);
            e.preventDefault();
            _bh.animate({ scrollTop: pos }, 'slow', 'swing');
        }
    });

What it does: If $(this).attr('href') starts with a hash (#), it then finds the target (var target = $('article' + $(this).attr('href'))), its offset, and then subtracts the navbar height (Math.max(target.offset().top - $('#navbar').height() + 15, 0);), prevents the default, and animates to that position.

Example, adapted to your code:

$('a').click(function(e) {
    var href = $(this).attr('href'), div;
    if (href.charAt(0) == '#' && (div = $('div' + href))) {
        e.preventDefault();
        var pos = Math.max(div.offset().top - $('#navbar').height(), 0);
        $('html, body').animate({scrollTop: pos}, 2000);
    }
});

You can tweak pos by a few pixels (just +/- x) if you care about the borders. Use just like <a href="#intro">Intro</a>.

Answer 2

You'd be able to work this out if you modify your HTML and JS a little to use data-scroll. Use this for your HTML:

<nav id="navbar">
    <ul id="navItems">
        <li><a id="wel" href="#" data-scroll="top">Welcome</a></li>
        <li><a id="SendMsg" href="#" data-scroll="msg">Send me a message</a></li>
        <li><a id="myResume" href="#" data-scroll="resume">My Resume</a></li>
    </ul>
</nav>
<div class="wrapper">
    <section id="top" data-anchor="top">
        <div id="name">
            <h1 id="moh">Mohamed Ahmed Eshawaf</h1>
        </div>
        <div id="pos">
            <h3>.NET Developer</h3>
        </div>
        <div id="pos2">
            <h3>Web Designer</h3>
        </div>
        <div id="pos3">
            <p style="font-size:24pt">
                Some paragraph here!
            </p>
        </div>
    </section>
    <section id="msg" data-anchor="msg">

        <h1>Send me a message</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>

    <section id="res" data-anchor="resume">

        <h1>My Resume</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>
</div>

And this for your CSS (which covers the margin question but with padding):

#navbar {
    background-color: #019AA4;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    margin: 0 auto;
    width: 1000px;
    height: 50px;
    position: fixed;
    right: 13%;
    top: 0px;
    z-index: 888;
    display: block;
}

ul#navItems li {
    float: left;
    line-height: 48px;
    margin-right: 30px;
}

#navItems {
    position: absolute;
    top: 0px;
    right: 150px;
    list-style-type: none;
    width: 615px;
    height: 50px;
    margin: 0 auto;
}

.Mask1
{
    width:50px;
}

#intro {
    position:relative;
    top:80px;
}


section {
    padding: 20px 0;
}

.wrapper {
    margin: 0 auto;
    position: relative;
    padding: 28px 0 0 0;
}

And your JS:

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint  = $('section[data-anchor="'+scrollAnchor+'"]').offset().top - 28;

   $('body,html').animate({
       scrollTop: scrollPoint
   }, 2000);
   return false;
})

Check the DEMO