I face 2 problems:
1) When I place the anchor tag at the beginning of a section (Eg.Services) and the Menu item Services is clicked, some portion of the section gets hidden behind the sticky menu. So, it doesn’t take us to the exact beginning of the section.
2) When the menu item is clicked, it just jumps directly to the place where the anchor tag is placed, instead of gently scrolling to that section.

How do I sort these 2 issues?

HI there,

First off here’s how anchoring to a a position in the same page gets done:

http://www.webweaver.nu/html-tips/link-within-a-page.shtml

You need to point to the ID of the element you are taking the user to… so if you have ”#service” like in your case you need some element with the ID of “service”, in your case as the header has a position “static” it doesn’t get counted within the total page offset, so you would place your target element a bit before the actual place you want to scroll to, I would add a DIV within the previous container, just like you did with that anchor with name ‘service’ instead make it a DIV after the tabs, something like:

You can further play around with the height to get the best effect. As for the animation… you can check out some jquery plugins to achieve the animation effect, or create your own, check these out:

http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript http://css-tricks.com/snippets/jquery/smooth-scrolling/
Good luck!