CODEWITHSUNDEEP
jqueryhtmlcssanchorfixed
Britta-Leonie Meyer
Britta-Leonie Meyer

Reputation: 23

Using anchor tags when header element uses fixed position

The header position is fixed and is 100px tall.

There are anchor tags within the header that goto content. The problem is because of the header when its clicked it doesnt scroll to the correct place. i.e. it scrolls to far.

How can I add vertical space (padding) to that anchor position so it shows correctly?

my code

link:

<li>
  <a href="#whoisresponsible">text</a>
</li>

anchor:

<h3>
  <a name="whoisresponsible"></a>Q:&nbsp; Who is responsible for Lifeline’s Suburban Garage Sales?
</h3>

here is a js fiddle

http://jsfiddle.net/lmeyer/XqLRg/3/

Upvotes: 2

Views: 1047

Answers (3)

Dan
Dan

Reputation: 1295

jQuery(document).ready(function() {

jQuery(".link").on("click", function(e) {

    e.preventDefault();

    var name= jQuery(this).attr("href");
    var n=name.split("#"); 

    var element = jQuery('[name="'+n[1]+'"]') 
    var container = jQuery("#mainContainer");


    var number = element.offset().top - container.offset().top + container.scrollTop() -190;
    jQuery(document).scrollTop(number);



});
});

Upvotes: 1

Michael B.
Michael B.

Reputation: 2809

Try This instead http://jsfiddle.net/TDPP4/

Add CSS classes to h3 and a

<h3 class="Head3">
  <a class="InLink" name="whoisresponsible"></a>Q:&nbsp; Who is responsible for Lifeline’s   Suburban Garage Sales?
</h3>

Then add this CSS

.Head3{
    position:relative;
    overflow:hidden;    
}
a.InLink{
     position:absolute;
     margin-top:-150px;
}

Upvotes: 1

Yudha Setiawan
Yudha Setiawan

Reputation: 386

I'm not sure my answer is correct, because i'm really not understand what your problem.

Set the position of the heading target to be :

relative or absolute

then when the anchor link clicked you set the position of the target where it is must to stop

Upvotes: 0

Related Questions