Q:

Jump to a specific part of page

I've experimented with a simple "feature" on my Shopify theme, where I want a link to jump to a specific part of the page - quite simple, and I've done it like this.
<a href="#jumpto">Jump to section</a>

<span id="jumpto">The section i want to jump to</span>

It works like a charm, but! I have a sticky header, where the "The section i want to jump to" is hidden behind. Is there any way, with css, push it a bit down down, so "The section I want to jump to" is shown, right beneath the header.
Basically I want the span element to appear for example 50px beneath the header.
My setup looks something like this
<div id="sectiona">
</div>

<span id="jumpto">The section i want to jump to</span>
<div id="sectionb">
</div>

If i use margin og padding, the gab between would be to big.

A:

You can use JavaScript to solve your problem and make smooth scrolling as well. 
$('a[href*="#"]').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 50
    }, 500);
    return false;
});

