Attempting to implement a simple "scroll jump to target" functionality. I've managed to set it up for all parts except the "scroll to top". The jumping works based on the tag's id, so it navigates well everywhere else, but not to the very top. Here's a simplified version of my code:
<ul class="nav navbar-nav">
<li class="active"><a id="home" href="#home">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
Further down:
<div id="wall_1" class="myImage" data-stellar-background-ratio="0.4"></div>
<div id="content_1" class="myContent">
<div id="services"></div>
...
<p><a href="#Home">Go to the top</a></p>
</div>
<div id="wall_2" class="myImage" data-stellar-background-ratio="0.4"></div>
<div id="content_2" class="myContent" >
<div id="about"></div>
...
<p><a href="#Home">Go to the top</a></p>
</div>
<div id="wall_3" class="myImage" data-stellar-background-ratio="0.4"></div>
<div id="content_2" class="myContent">
<div id="contacts"></div>
...
<p><a href="#Home">Go to the top</a></p>
</div>
JS:
<script>
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 81
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
How can I make it scroll back to the top now?