If you want to enhance your website's scrolling functionality, consider updating your HTML and JS code to incorporate data-scroll attribute. Here is an example of how you can modify 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 ultrici...
 Reactivity build my resume
           </p>
 </section>
 </ section >
</section>
</div> 

Furthermore

# 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 : 50 px ;
}
# intro {
 position: relative;
 top: 80px;
}


section {
 padding: 20px 0;
}

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

 

Also

$('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 Out the DEMO

   

You do not need to use a .Mask1, you can utilize this code directly.

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

Make sure to include some top margin for #intro (e.g., if the navbar is 50px tall, then add #intro { margin-top: 50px; }) to avoid content being hidden.

When seeking assistance, it’s beneficial to provide a Minimal Working Example (MWE) which can be created on sites like https://jsfiddle.net/.

If you want to replicate behavior from a specific site, inspecting the site could help. The referenced code sample (from ) follows CCA 3.0 by html5up, as indicated in the header. If copying and pasting, ensure attribution as per .

The original code snippet:

    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');
        }
    });

Description of its function: If $(this).attr('href') begins with a hash (#), it locates the target (

var target = $('article' + $(this).attr('href'))

), calculates its offset while accounting for the navbar height (

Math.max(target.offset().top - $('#navbar').height() + 15, 0);

), prevents default action, and animates to that position.

Here's an example tailored 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);
    }
});

If borders are crucial, adjust pos by a few pixels (+/- x). Implement similar to

<a href="#intro">Intro</a>

.