Edit in JSFiddle

$(function(){

    var link = $('#navbar a.dot');
    link.on('click',function(e){
        
        //href 속성을 통해, section id 타겟을 잡음
        var target = $($(this).attr('href')); 
        
        //target section의 좌표를 통해 꼭대기로 이동
        $('html, body').animate({
            scrollTop: target.offset().top
        },600);
        
        //active 클래스 부여
        $(this).addClass('active');

        //앵커를 통해 이동할때, URL에 #id가 붙지 않도록 함.
        e.preventDefault();
    });
    
    $(window).on('scroll',function(){
        findPosition();
    });

    function findPosition(){
        $('section').each(function(){
            if( ($(this).offset().top - $(window).scrollTop() ) < 20){
                link.removeClass('active');
                $('#navbar').find('[data-scroll="'+ $(this).attr('id') +'"]').addClass('active');
            }
        });
    }

    findPosition();
});

<!-- Start Nav Section -->
<nav id="navbar" class="navbar">
  <ul class="nav-menu">
    <li>
      <a data-scroll="home" href="#home" class="dot active">
        <span>Home</span>
      </a>
    </li>
    <li>
      <a data-scroll="one" href="#one" class="dot">
        <span>one</span>
      </a>
    </li>
    <li>
      <a data-scroll="two" href="#two" class="dot">
        <span>two</span>
      </a>
    </li>
    <li>
      <a data-scroll="three" href="#three" class="dot">
        <span>Three</span>
      </a>
    </li>
    <li>
      <a data-scroll="four" href="#four" class="dot">
        <span>Four</span>
      </a>
    </li>
  </ul>
</nav>
<!-- End Nav Section -->
<section id="home"></section>
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<section id="four"></section>

<footer>
    created by <a href="http://kutar37.tistory.com">kutar37</a>
</footer>

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}
/* Start Section Styles */
section {
    width: 100%;
    min-height: 800px;
}

#home {
    background-color: green;
}

#one {
    background-color: blue;
}

#two {
    background-color: yellow;
}

#three {
    background-color: salmon;
}

#four {
    background-color: purple;
}
/* End Section Styles */

/* Start Nav Styles */
.navbar {
    position: fixed;
    z-index: 999;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
}

.navbar .nav-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.navbar .nav-menu li {
    position: relative;
    min-width: 200px;
    text-align: right;
}

.navbar .nav-menu li .dot {
    display: block;
    color: #fff;
    padding: 5px 0;
}

.navbar .nav-menu li .dot::before,
.navbar .nav-menu li .dot::after {
    display: block;
    position: absolute;
    content: '';
    border-radius: 50%;
    top: 50%;
    transition: all .3s ease;
}

.navbar .nav-menu li .dot::before {
    width: 5px;
    height: 5px;
    right: 0;
    border: 2px solid #181818;
    transform: translateY(-50%);
}

.navbar .nav-menu li .dot::after {
    width: 15px;
    height: 15px;
    border: 2px solid #f44336;
    right: -5px;
    transform: translateY(-50%) scale(0);
}

.navbar .nav-menu li .dot.active::before,
.navbar .nav-menu li:hover .dot::before {
    background: #f44336;
    border-color: #f44336;
}

.navbar .nav-menu li .dot.active::after,
.navbar .nav-menu li:hover .dot::after {
    transform: translateY(-50%) scale(1);
}

.navbar .nav-menu li .dot span {
    display: inline-block;
    opacity: 0;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: capitalize;
    background-color: #f44336;
    padding: 10px 20px;
    border-radius: 3px;
    margin-right: 30px;
    transform: translateX(20px);
    transition: all .3s ease;
}

.navbar .nav-menu li .dot span::before {
    display: block;
    position: absolute;
    content: '';
    border-left: 7px solid #f44336;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    top: 50%;
    transform: translate(7px, -50%);
    right: 0;
    transition: all .3s ease;
}

.navbar .nav-menu li .dot.active span,
.navbar .nav-menu li:hover .dot span {
    transform: translateX(0px);
    opacity: 1;
}
/* End Nav Styles */

footer{
    width:100%;
    height: 300px;
    background-color: #181818;
    color: white;
    font-size: 50px;
    text-align: center;
    line-height: 300px;
}