Использовать атрибут rel в качестве ссылки

Вы можете попробовать это.

JS включен

<nav class="script">
  <ul>
    <li><a href="#" data-rel="s1">Link 1</a>
    </li><li><a href="#" data-rel="s2">Link 2</a>
    </li><li><a href="#" data-rel="s3">Link 3</a>
    </li><li><a href="#" data-rel="s4">Link 4</a>
    </li><li><a href="#" data-rel="s5">Link 5</a>
    </li>
  </ul>
</nav>


<section id="s1">

</section>

<section id="s2">

</section>

...

$(function () {
  $('nav li a').click(function(e) {
    e.preventDefault();
    $('html, body').stop().animate({ scrollTop: $('#'+ $(this).data('rel')).offset().top + 'px' }, 1000, 'easeOutSine');
  });
});

JS отключен

<noscript>
  <style>.script { display: none; }</style>

  <nav class="noscript">
    <ul>
      <li><a href="#home">Link 1</a>
      </li><li><a href="#sevices">Link 2</a>
      </li><li><a href="#portfolio">Link 3</a>
      </li><li><a href="#about">Link 4</a>
      </li><li><a href="#contact">Link 5</a>
      </li>
    </ul>
  </nav>
</noscript>

Или универсальное решение, как вы пытались в своей скрипке

<nav>
  <ul>
    <li><a href="http://www.example.com/#home">Link 1</a>
    </li><li><a href="http://www.example.com/#sevices">Link 2</a>
    </li><li><a href="http://www.example.com/#portfolio">Link 3</a>
    </li><li><a href="http://www.example.com/#about">Link 4</a>
    </li><li><a href="http://www.example.com/#contact">Link 5</a>
    </li>
  </ul>
</nav>

$(function () {
  $('a').click(function(e) {
    e.preventDefault();
    var target = $($(this).attr('href').replace('http://www.example.com/', ''));        
    $('html, body').animate({scrollTop: target.offset().top + 'px' }, 1000);        
  });
});

Ваш FIDDLE обновлен.