How to achieve quick positioning on the page with JS (anchor jump problem)

This article mainly introduces how JS can achieve rapid positioning on the page (anchor jump problem). It has certain reference and value for learning js. Friends who are interested in JS can refer to this article

1. Introduction to anchor point jump

The anchor point is actually a point that allows the page to be positioned at a certain location. Often seen on taller pages.

There are two forms of anchor jump:

• a tag + name / href attribute

• Use the id attribute of the tag

Before HTML 4.0, fragment identifiers could only be created using the name attribute of the tag. The presence of the id attribute enables all HTML or XHTML elements to be fragment identifiers. This is because the id identifier can be used in almost all tags. The tag retains the name attribute for compatibility with previous versions, but can also use the id attribute. These attributes can be used interchangeably, and the id attribute can be thought of as an upgraded version of the name attribute. Both the name and id attributes can be used in conjunction with the href attribute, so that an tag can be used as both a hyperlink and a fragment identifier.

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a>
<a href="#f" rel="external nofollow" ></a>

But this method uses an empty tag, and sometimes the anchor point fails. Therefore, it is recommended to use id to bind the anchor point. The code is as follows:

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a><h2 id="#de">波轮洗衣机介绍</h2>

2. URL address containing anchor point jump

window.location.hash

【1】About

# In the production of pages, the "#" symbol is very common and has universality. Basically, what it means is the id selector. Similarly, in the URL of the page, # can also be understood as the id selector, that is, the page jumps to the id tag containing the URL pointed to.

There is a '#' at the end of this address, which is equivalent to telling the browser to jump. The 3 followed by # means that it will be at http://www.php.cn/view In the page /121416.htm?p=1, search for tags that meet the characteristics of #3 and execute the jump.

【2】About empty anchor points

If the character id following # in the URL cannot be found in the text, there will be two situations: if It is on the current page. Except for the change of the URL address, nothing else will change, and the page will not jump. If it jumps from other pages, the page will be displayed at the top, and '#' is basically a decoration.

【3】window.location.hash

3. Smooth jump of anchor point under Jquery.

If you let the page scroll smoothly to an element with the id of box, the JQuery code only needs one sentence, and the key positions are as follows:

$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)

JS native implementation.

scrollTo() method can scroll the content to the specified coordinates.

scrollTo(xpos,ypos);

4. Anchor point refresh failure under IE and solution under JQuery

[1]About anchor point refresh failure

Anchor point refresh failure means that when the refresh key F5 is pressed, even if the URL is followed by an anchor point, this anchor point will not work.

【2】In Jquery, it is not difficult to achieve. You can obtain the anchor point according to the URL, thereby further obtaining the corresponding anchor point object , and then let the scroll height of the page be its offset value from the top of the page

. This makes the anchor points behind it work regardless of whether the page is reloaded or refreshed.

$(function() {
  var url = window.location.toString();
  var id = url.split('#')[1];
  if (id) {
    var t = $('#' + id).offset().top;
    $(window).scrollTop(t);
  }
})

The above is the entire content of this article, I hope it will be helpful to everyone’s study! !

Related recommendations:

Explanation of Require calling js in JavaScript

##Analysis of double equal sign implicit conversion mechanism in Javascript

JavaScript doubly linked list definition and usage

The above is the detailed content of How to achieve quick positioning on the page with JS (anchor jump problem). For more information, please follow other related articles on the PHP Chinese website!