跳转到页面的特定部分

Question

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.

Answer 1

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;
});

Answer 2

This might not the prettiest solution, but it should do the trick. By having an empty span ( .jump-marker ) acting as the jumping point you can offset the position where the anchor jumps to.

.jump-marker {
  position: absolute;
  margin: -120px 0 0;
}

You could also use JS/jQuery to offset the scroll distance by your header height and also allow smooth scrolling, which is much more pleasing to the eye, but that wasn't asked for! :)

Example:

 body { padding-top: 120px; } header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255,0,0,0.25); height: 100px; } .more-content { height: 1000px; background: #f7f7f7; } section { position: relative; } .jump-marker { position: absolute; margin: -120px 0 0; }

 <header></header> <a href="#jumpto">Jump to section</a> <div class="more-content"></div> <section> <div class="section-content"> <span id="jumpto" class="jump-marker"></span> The section i want to jump to </div> </section> <div class="more-content"></div>

Answer 3

I make a basic header fixed and made the links tag link offset from the place I want to link too. This solution is really rough but can work with good CSS and placing html:

<div class="jumpTo">
    <a id="0">0</a>
</div>
<h2>0</h2>

css:

.jumpTo{
  margin-bottom: 100px;
  font-size: 0;
}

https://jsfiddle.net/ovcx2t9z/

or a fiddle based on the Jquery solution

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;
});

https://jsfiddle.net/qy03xb1r/2/

Answer 4

How is the page layed out? Have you tried using padding or margin adjustments like.. padding-top:50px; or margin-top:50px.