Q:

Cannot read property 'top' of undefined Jquery/javascript

Probably this question has been answered many times before, but i can't find anything that related to my code. 
Everything works properly, when the menu nav is open, etc. the smooth scrolling works as well, except when i click the arrow-down to go the the next section, smooth scrolling doesnt work. 
I have been looking at it and trying to figure it out for a while but i am unable to do so. 
I am still learning jquery and javascript.
A full DEMO of this code in use can be found HERE.
Open dev tools and you will see the errors in the console.
EDIT 
added..
.arrow-down-wrapper a[href^="#"]

to
$('nav.mobile-nav a[href^="#"], .arrow-down-wrapper a[href^="#"]').on('click', function (e) {
...
}

Smooth scrolling not works for the 'arrow-down', but i am still getting 
'Uncaught TypeError: Cannot read property 'top' of undefined'
console.log(target); outputs the correct targets. #Home, #about, etc..
This is the code i have:
    //smooth transition to sctions when links in header are clicked

    function onScroll(event){
      var scrollPosition = $(document).scrollTop();
      $('nav.mobile-nav a').each(function () {
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
          $('nav.mobile-nav a').removeClass("current");
          currentLink.addClass("current");
        }
        else{
          currentLink.removeClass("current");
        }
      });
    }

    $(document).ready(function () {
            $(document).on("scroll", onScroll);

            $('nav.mobile-nav a[href^="#"]').on('click', function (e) {
                e.preventDefault();
                $(document).off("scroll");

                $('nav.mobile-nav a').each(function () {
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                var target = this.hash;
                $target = $(target);
                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 1000, 'swing', function () {
                    window.location.hash = target;
                    $(document).on("scroll", onScroll);
                });
            });
        });

A:

The issue was that the code wasn't specific enough. The loop was iterating through all the items in the list, that is all the links that where #tags, and links to other pages. That is the reason i was getting the error of top not defined, that item it was looking for didn't exist. a[href^="#"' after adding that, loop only iterated the items with # ID tags. 
Commented the changes i made 
//smooth transition to sctions when links in header are clicked
    function onScroll(event){
      var scrollPosition = $(document).scrollTop();
      $('nav.mobile-nav a[href^="#"').each(function () { //added a[href^="#"] so that the loop only iterates over the elements with the ID tag
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        console.log(currentLink.attr("href")); //log
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
          $('nav.mobile-nav a').removeClass("current");
          currentLink.addClass("current");
        }
        else{
          currentLink.removeClass("current");
        }

      });
    }

    $(document).ready(function () {
            $(document).on("scroll", onScroll);

            $('nav.mobile-nav a[href^="#"], .arrow-down-wrapper a[href^="#"]').on('click', function (e) {
                e.preventDefault();
                $(document).off("scroll");

                $('nav.mobile-nav a').each(function () {
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                var target = this.hash;
                $target = $(target);
          console.log(target);
          $('html, body').stop().animate({
                    'scrollTop': $target.offset().top - 100
                }, 1000, 'swing', function () {
                    window.location.hash = target;
                    $(document).on("scroll", onScroll);
                });

            });
        });

