Analysis of anchor points in CSS & Blood and Tears Lessons

Before: In the work, if you find a bug, do not fantasize about being able to muddle through, others will not find, be sure to catch up with others before they find out!! Otherwise the result is, tomorrow on-line, today put forward this bug, request repair, then their own night Midnight Oil modify!! ~ ~ ~ (>_<) ~ ~ ~

Let's talk about the problems you encountered:

The effect you want to achieve is to link to the B anchor of page B by the href link in a (href = ' b.html#b ') on page A.

Normal page can be implemented normally, the so-called ordinary page refers to the page one-time rendering, there is no JS dynamic loading elements, the behavior of destroying the DOM tree.

Now the problem is that anchor B is in the middle of page B, there is a table under B, the elements are dynamically added, that is:

(1) in the process of jumping from A to B, the B page loading HTML is finished, the DOM tree rendering is complete, but the JS script has not been executed, the anchor point has been calculated!

(The anchor point is originally a CSS field, so it is loading HTML and CSS page rendering first.) Write here and want to review the page load, the order of the rendering exactly how it is! ）

(2) Next, JS blocking load execution, dynamically add elements, re-render the DOM tree structure. Cause the anchor point to be offset, so that the page is not positioned to see the wrong, scroll down!

(Because we do not know how the principle of the implementation of the anchor point, so can only describe the phenomenon seen)

The current solution is:

Use JS, read the hash value passed: #target, manual scrolling to the target position;

var hash = window.location.hash;if (hash = = ' #target ') {    window.location.hash = ';  To prevent the refresh, go back to the anchor Point    window.scrollto (0, 675);  }

Concern: currently because the anchor point is located in the middle of the page, while the height of the upper half of the anchor point is fixed, although there is a dynamic fill part, but the height value is not changed, so you can scroll to the height of the value of death, but if the upper part of the page has a height change, the scrolling position will be inaccurate! (The test environment and the online environment will be slightly different, because there will be a public header on the line, push announcement information!) ）

Then analyze the principle of the anchor point:

Write in the first few words: ' no scrolling, no positioning '; ' scroll bar to the top of the anchor element, coincident with the upper edge '

First, we introduce several common methods of Anchor point location:

(1) ID positioning, using ID + #id跳转, can be implemented to bind the anchor element to any element

(2) name positioning, only for a tag to locate, the other labels can not play the role of positioning.

(3) Universal JS positioning, get the element position, use scrollIntoView (); To be precise, this method does not belong to the anchor position.

About the scrollIntoView () method, which works under the native DOM, but jquery does not support it;

For me, it will also roll down to the target position.

Regardless of which method in the above method, when the page (exactly should be the parent element) of the scroll bar is not or insufficient, no scrolling or scrolling at the bottom (do your best!). ）

Because of the universal nature of JS, this is not discussed here; The following is a discussion of the implementation of Anchor point positioning:

The essence of anchor positioning is to modify the container's scrolling height, or to say that the parent container has no scrolling, and the anchor position is invalidated.

Application of Anchor Point:

1. Combined with Overflow:hidden, realize: No JS completely with CSS to implement the tab rotation switch effect (this effect, you can rescue when JS hangs, keep the scrolling function of the picture)

Note: Overflow:hidden is hidden beyond the section, there is no scroll bar;

CSS3: Target Pseudo class + anchor point

The URL is followed by an anchor name #, which points to a specific element within the document. The linked element is the target element.

: The target selector can be used to select the currently active destination element and change the style;

If the page is high enough, there will be a change in style along with the scrolling of the page.

(Pseudo-class: Target's support situation is: IE6-8 is not supported, the rest are supported!) The future of CSS powerful signs! ）

Reference article:

http://www.zhangxinxu.com/wordpress/2013/08/url-anchor-html-%E9%94%9A%E7%82%B9%E5%AE%9A%E4%BD%8D%E6%9C%BA%E5% 88%b6-%e5%ba%94%e7%94%a8-%e9%97%ae%e9%a2%98/

Http://bbs.blueidea.com/thread-2952396-1-1.html

Http://www.zhangxinxu.com/wordpress/2010/07/%E9%94%9A%E7%82%B9%E8%B7%B3%E8%BD%AC%E5%8F%8Ajquery%E4%B8%8B%E7%9B %b8%e5%85%b3%e6%93%8d%e4%bd%9c%e4%b8%8e%e6%8f%92%e4%bb%b6/

Analysis of anchor points in CSS & Blood and Tears Lessons