CSS/JS Implementation Click Anchor point to position offset top

One way to see the StackOverflow is to add a dark anchor to the main content:

The code is as follows	Copy Code
<a class= "Target-fix" name= "a-<?php $a->id ();?>" ></a> <artivle> Main content ...</article>

Offset the anchor point and hide the placeholder:

The code is as follows	Copy Code
. target-fix { position:relative; Top: -44px; Offset value Display:block; height:0; Overflow:hidden; }

This is also the most direct way.

I'm using a relatively concise approach: if you support CSS for a modern browser: Target statement, you can set this:

The code is as follows	Copy Code
article.a-post:target{ padding-top:44px; }

For IE, such as backward browser is not supported. You can also use JS to adjust scroll, such as using jquery:

code is as follows	copy code
$ (function () {   if (location.hash) {      var target = $ (location.hash);      if ( target.length==1) {          var top = Target.Offset (). top-44;           if (Top > 0) {               $ (' html,body '). Animate ({scrolltop:top}, 1000);         }     }  } });

You can use Jquery-hashchange:https://github.com/cowboy/jquery-hash ...

Bind Window.onhashchange Event:

The code is as follows	Copy Code
$ (function () { /* Bind Event/* $ (window). Hashchange (function () { var target = $ (location.hash); if (target.length==1) { var top = Target.Offset (). top-44; if (Top > 0) { $ (' html,body '). Animate ({scrolltop:top}, 1000); } } }); /* Trigger Event * * $ (window). Hashchange (); });

About Window.onhashchange event: https://developer.mozilla.org/en-US/d ...