How to scroll a web page with fixed navigation bar just before arrive to a section or div?

Question

I think the title is enough to understanding my problem.

I'm working on a one page HTML template with fixed navigation bar. When I scroll down, it comes over my section title. I've coded like this:

<a href="#service"></a>
<section id="services"></section>

I want to scroll down just a little before top of my section.

Thank you.

Duplicate http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header — Wouter Florijn, Dec 30 '14 at 20:10

score 1 · Accepted Answer · answered Dec 30 '14 at 20:08

1

Give the content div a padding-top, or margin-top of the height of the nav bar:

<a href="#link">Link</a>
<div id="link" class="content">
    Content Here...
</div>

CSS:

.content{
    padding-top:50px;
}

JSFiddle Demo

answered Dec 30 '14 at 20:08

Jacob G

13,762
3
47
67

Nice one Imagine WebDesign! – Mr. Concolato Dec 30 '14 at 20:23
Thanks, It is a really simple solution :) – Jacob G Dec 30 '14 at 20:24

score 0 · Answer 2 · answered Dec 30 '14 at 20:12

I created this small snippet to solve a problem similar to this. http://codepen.io/mccell/pen/DdyKl/

There are some notes in the code. But basically it uses jquery's scrolltop to move the anchorlink to the top of the page but also adds the ability to offset with a custom data-offset attribute.

This is the main working part of the code.

  $('html, body').animate({
    scrollTop: $(target).offset().top-offsetValue
   }, 1000);

How to scroll a web page with fixed navigation bar just before arrive to a section or div?

2 Answers2

JSFiddle Demo