CODEWITHSUNDEEP
javascriptcsshtmltwitter-bootstrap
trante
trante

Reputation: 34006

HTML page goto inline link when fixed navbar exists

I have an inline link in the bottom of my HTML page. I want user click link and page goes to top. When I make this it works: scroll(0,0); return false;. But I don't prefer a javascript result. I created links to div and anchors. But didn't work:

<div id="a1" class="navbar navbar-inverse navbar-fixed-top">
     <div id="a2" class="navbar-inner">
    </div>
</div>

<a href="#" id="a3">XYZXYZ</a>
<a href="#a3" id="link3">go to top 3</a><br><br>

Check this fiddle: http://jsfiddle.net/BtGEx/4/ "Go to top 2" works, "Go to top 1" doesn't work.

Upvotes: 1

Views: 487

Answers (3)

guydog28
guydog28

Reputation: 1317

I would suggest a "false top" div, like this fiddle

You can add this under your navbar:

<!--false top, also provides the "body padding" -->
<div id="div1"/>

and then this to your CSS:

#div1 {
    padding-top: 70px;
}

and finally your link 1 at the bottom just goes to #div.

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You can link inside your page with named anchors.

For instance, you can place <a name="top"></a> right underneath your <body> tag.

At the bottom you make a link <a href="#top">Go to the top</a>.

I hope this is what you mean.

EDIT,

When using HTML5, you shouldnt use named anchors, instead use global id's. Check the link in Pavlov's comment!

EDIT (can see the right fiddle now)

Since your navbar is positioned at a fixed position it is outside the DOM. The links work as the should, it scrolls the page to that position. There is no solution in HTML of CSS to scroll it to underneath the navbar.

You could however use JQuery. Determine what the position of the anchor is and add the height of the navbar to the y value.

Good luck!

Upvotes: 2

hajpoj
hajpoj

Reputation: 13389

Looking at the js fiddle. "Go to top" is working as expected. It is setting jumping to the link and putting the link at the top of the page. It just so happens that the link while at the top of the screen is behind the nav bar.

To fix your js fiddle all you need to do is add a padding to the link equal to the padding on the body that you added 

#a1 {
    padding-top: 70px;
}

And now it will appear to scroll to the top, but the link won't hide behind the nav bar. http://jsfiddle.net/hajpoj/BtGEx/1/

Upvotes: 0

Related Questions