You could try this.
JS enabled
<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 disabled
<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>
Or universal solution like you tried in your fiddle
<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);
});
});
Your FIDDLE updated.