CODEWITHSUNDEEP
htmlcss
user1154644
user1154644

Reputation: 4609

Moving to a specific section on an HTML Page

I have an a tag that I am using to specify the section on an HTML page where I want to move when a link is clicked:

<a name="ourServicesSection"></a>

This works fine, the only problem is that I have a fixed navbar on top of the page. So, when I click the link it moves to the section of the page, but a slice of it is covered up by the navbar. Is there a way I can "offset" the move by the size of the navbar? How would I do that?

Thanks

Upvotes: 1

Views: 674

Answers (3)

user3290988
user3290988

Reputation:

If you are willing to use jQuery, something like this would work.

 $('a[href^="#"]').on('click', function(e) {
     e.preventDefault();

     var scrollTo = $(this).attr('href');

     var pageOffset = $(scrollTo).offset().top - ($(window).height() / 2);
     $(document).scrollTop(pageOffset);
 });

Example: http://jsfiddle.net/vDQaT/

Upvotes: 0

pwolaq
pwolaq

Reputation: 6381

You can use Javascript (jQuery) to handle the scroll with offset or reposition element using margin

Upvotes: 0

kba
kba

Reputation: 19466

Putting a margin/padding at the top of whatever element you're scrolling to seems to be the common practice. Or move up the achor destination.

Upvotes: 1

Related Questions