jquery on the page based on ID location (jquery anchor jump and related operations) classic

Tag: IV string operation span realizes positioning form off [1]

1. Anchor Jump Introduction The edit anchor Point is actually a point where the page can be positioned to a certain location. It is often seen in high-altitude pages. such as Baidu's Wikipedia page, the page content in the wiki. I know that there are two types of jumps that implement an anchor, one is a tag +name property, and the other is the id attribute of the tag. Baidu Encyclopedia is the use of the name of a tag property to achieve the anchor point jump. For example:<ahref= "#2">Wave Wheel Washing Machine introduction</a> <aname= "2"></a>However, the previous method uses an empty tag, and sometimes an anchor point fails. So it is recommended to use an ID to bind the anchor point, the code is as follows:<ahref= "#2">Wave Wheel Washing Machine introduction<H2ID= "2">Wave Wheel Washing Machine introduction</H2>2. URL address with anchor-point jumpEdit "1" about # in the production of the page, the symbol "#" is very common, and it is universal. Basically, the meaning of its representation is the ID selector. For example: In CSS, #header{} represents the style of the label with the header ID, and in jquery, $ ("#header") means that the tag with the header is selected as a JQuery object, and again, in the URL of the page, "#" It can also be understood as the ID selector, which means that the page jumps to the label with the ID that the URL points to.For example, enter an address http://baike.baidu.com/view/121416.htm?pf=1#3there is a "#" at the end of this address, which is equivalent to telling the browser to jump, #后面跟着的3表示会在http://baike.baidu.com/view/121416.htm?pf=1 's page looking for a label that matches the "#3" feature, and perform a jump. "2" about the empty anchor point if the character ID followed by "#" in the URL is not found in the text, there are two cases: if it is in the current page, in addition to the URL address changes, the other will not change, the page will not jump, if you jump from other pages, the page will be displayed at the top, "#" The basic is the ears of the deaf--furnishings.smooth jump of Anchor point under 3.JQueryEdit the smooth jump for the anchor point, on the general commercial nature of the website, weigh it, be careful to use. For example, to have the page scroll smoothly to an element with an ID of box, the jquery code is as long as one sentence, the key position is as follows:$ ("Html,body"). Animate ({scrolltop:$ ("#box"). Offset (). top},1000)Where Animate is a custom animation method for jquery, $ ("#box"). Offset (). Top indicates that a jquery object with the ID of box is offset from the top of the page, and 1000 indicates that the smoothed animation executes at 1000 milliseconds, or 1 seconds.4.IE Anchor Point refresh failure and jquery solutionEdit "1" about anchor refresh failure anchor Refresh means that when the refresh key F5 is pressed, even if the URL is followed by the anchor point, this anchor point will not work. "2" is not difficult to achieve in jquery. You can get the anchor point based on the URL, so that the corresponding anchor point object, and then let the page scroll height is its distance from the top of the page offset value. Causes the page to reload or refresh, and the anchor points behind it all work. Its JS code is as follows:$ (function () {var url = window.location.toString ();   var id = url.split ("#") [1];      if (id) {var t = $ ("#" +id). Offset (). Top;   $ (window). scrolltop (t); }});

Original URL https://www.cnblogs.com/zst062102/p/6404705.html Thank you

jquery on the page based on ID location (jquery anchor jump and related operations) classic