Geek Answers Handbook

How do I go to just above the anchor mark?

I know how to navigate to a specific anchor tag on a page - what I'm trying to do is link to a part of the page that is 30-40 pixels above the target anchor. The reason for this is because I have boot navigation that ends up covering part of the relevant content if I like the part of the page directly with an anchor.

I currently have this for reference:

%a{:href => root_path + "#how_it_works"} How It Works

and on the page he links to:

 .span12#how_it_works

Any thoughts on how I can get the link to go to the section of the page that is a little higher .span12 # how_it_works?

+6
source share
5 answers

You may be able to hack this by adding extra extras to your css, but the surest way to do this is with javascript:

 $('a[href="#how_it_works"]').on('click',function(e){ // prevent normal scrolling action e.preventDefault(); // grab the target url from the anchor ``href`` var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { window.scrollTo(0, target.offset().top - 50); // <-- our offset in px adjust as necessary return false; } });

Here is the codepen .

It uses a modified version of Chris Coyier's smooth scrolling script . I chose "smoothness" from the scroll, but you can add it back by animating scrolltop as follows:

  if (target.length) { $('html,body').animate({ scrollTop: target.offset().top + 20 }, 1000); return false; }
+1
source

Will this work for you?
living example
jsFiddle

I added top additions to the anchors:
CSS

 a.anchor{ background-color:pink; padding-top:30px; display:block; margin-top:-30px; /* if you want to cancel out the padding-top */ }

HTML

  <a href="#section1">section1</a><br> <a href="#section2">section2</a><br> <a href="#section3">section3</a><br> <a href="#section4">section4</a><br> .... <a name="section1" class="anchor">section1</a> etc

EDIT
After reading your question again, if the problem is that you are using a bootstrap with an attached navigation bar, and part of the contents of your page is hidden under the navigation bar, an even simpler solution is to add indents to the upper part of the page body to move the page content below.

If you need to do this on every page of the site, use:
CSS

 body { padding-top:40px; }

If you only need to clear the navigation bar on the selected pages, add the class to the body tag on the malicious pages and specify only those specific pages, for example, HTML

 <body class="welcome"> ....

CSS

  body.welcome { padding-top:40px; }
+1
source

Have you tried the jQuery scrollTo plugin? It looks like it was used with some tweaking to do what you want. See Script / answer here Jquery ScrollTo issue

0
source

I have a great idea to trick your browser. No javascript needed.

Create a div tag, give it a name. Let the div be empty. Then in CSS, use positioning to move it how far you want.

 position: relative; top: -165px;

You can play with relative or absolute position depending on where you want.

Then just make the div tag an anchor tag.

 <div class="anchor_placement" id="anchor"></div>

When you go to the anchor, it will go where the div tag is.

0
source

Gu3miles - this worked great for me - I use anchors with a constant navigation bar.

 .anchorplace{position: relative; top: -74px; } <div class="anchorplace" id="challenge"></div>
0
source

More articles:


All Articles