Anchor location - how to set the distance between the anchor and the top of the page. The anchor is located and offset from the top

Anchor is a kind of hyperlink in web page making , Also called named anchor . Named anchors are like quick locators that are hyperlinks within a page , Use is quite common .

Using named anchors, you can set up tags... In your document , These tags are usually placed at or at the top of a specific topic in a document . You can then create links to these named anchors , These links can quickly take visitors to specific locations .

The process of creating a link to a named anchor is divided into two steps . First , Create named anchors , Then create a link to the named anchor .

1. Common anchor

<a href="#aboutmao" > Anchor link </a>

...


<div id="aboutmao"> Anchor jump here </div>

These are the perfect anchor functions , But if my website header Always fixed at the top , This is the anchor link, which used to be the top one header Distance of , Otherwise, the content of a wind linked to the past will be header Occlusion .

Such as this ：

The effect we want ：

This question uses js The solution is the most convenient ：

<a href="javascript:;" class="aboutmao"> About us </a>

<div id="about"> Anchor jump here </div>

<script> $(document).ready(function () {
       function topMao(target) {
       $('html, body').animate({
       scrollTop: $(target).offset().top - $('.topnav').height() // Top fixed navigation  }, 500); //130 Is the distance from the anchor point to the top ,500 For execution time  return false; } $('.aboutmao').click(function () {
       topMao('#about'); }) }) </script>

Click event of anchor , Then get this id Distance from the top of the page , subtract header Height , Last use window.scrollTo Slide directly to the anchor position . Already in ie10+、 firefox 、 Test on Google browser ok.