I have a long 1 page. And i have in my nav when you click, it scrolls you down to a certain part of the page.
Now when it scrolls down with my current JS, it brings the thing i want to see too far down and shows half of whats on top of it.
Here is some of my code:
Code
<script>
$(document).ready(function(){
$('a[href^="#media"],a[href^="#microprocessor"],a[href^="#networks"],a[href^="#web"],a[href^="#rotary"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 700, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
So basically i just added a <a id="media"></a> at the location I want that button to take me to.
My issue is that it scrolls too far down... I tried changing where I put the tag but I does not help.
Anything i could add to my JS that it will make the scroll go more or less given the location of the tag?