CODEWITHSUNDEEP
htmlcss
mikeymurph77
mikeymurph77

Reputation: 802

Anchor link on current page to not jump to very top of container

I'm using anchor tags to jump to certain questions on a page. And there is a sticky container (with position: fixed) at the top of the container.

<div class="main_container">
  <div class="jump_to_questions">
    <a href="#question_30">Jump to question 30</a>
  </div>  

  <div class="questions">
    # a bunch of questions...
    <a name="question_30">30</a>
  </div>  
</div>

When I click the link in the .jump_to_questions_container; question 30 jumps to the top of .main_container and falls behind the fixed container (which has a z-index: 5). Is there a way I can set the link location (after click) to be just under the fixed container?

I've tried adding a padding-top and margin_top to the .questions div... but that just pushed everything down the specified amount.

Upvotes: 0

Views: 1433

Answers (3)

Vikram
Vikram

Reputation: 3351

if you can use jquery code on you page then try following jquery code 

$(".jump_to_questions a").click(function(e){
 e.preventDefault();
 $('html,body').animate({scrollTop:$($(this).attr('href')).offset().top - $('.fixed-container-class').outerHeight()},1000);
});

it will scroll to the desired section smoothly on click on link

you will need to change fixed-container-class with actual fixed container class or id

Upvotes: 0

Rahul Nanwani
Rahul Nanwani

Reputation: 1277

One way could be to separate out the internal link from the actual question and the space between them should be >= the height of your fixed container. Assuming 50px is the height of your fixed container

<a href="#question-30">Go To Question 30</a>
...
...
<a name="question-30"></a>
<div style="height: 50px;clear:both;width: 100%"></div>
<a href="something">Your actual question</a>

Should work

Upvotes: 1

wjkawecki
wjkawecki

Reputation: 183

The anchor link has to begin with a hash sign "#".

<a href="#question_30">Jump to question 30</a>

Upvotes: 0

Related Questions