Shopify Question posted in
The Shopify help center can be found here.

Jump to a specific part of page – Shopify

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.

Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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;
});
    Login or Signup to reply.
  4. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search