jquery method to get the content of the file through load and jump to the anchor point_jquery

The example in this article describes how jquery obtains the content of the file through load and jumps to the anchor point. Share it with everyone for your reference. The specific analysis is as follows:

Yesterday I was making a page similar to a help document, with navigation on the left and content on the right. Originally I planned to use an iframe to implement the content display area on the right, but since I had to adjust the height of the iframe, I changed the method and used the load method in jquery's ajax.

Getting the contents of a remote file is easy to implement, just use jquery’s load method:

$("#content").load("xxx.aspx")

This makes it easy to place the content in the xxx.aspx file in the tag with the id of content. Another effect that needs to be achieved now is: after I get the content of the file, I need to jump to the corresponding anchor point, so I thought of using jquery's scrollTop. For example, after I get the content of the file, I need to move to the tag with id="name" :

$("body,html").animate({scrollTop:$("#name").offset().top});

offset() is to get the relative offset of the matching element in the current viewport. $("#name").offset().top is to get the relative offset of the label with ID name from the top of the current viewport. The above code combined into one piece needs to be written like this:

$(function(){
 $("#content").load("xxx.aspx",function(){
  $("body,html").animate({scrollTop:$("#name").offset().top});
 });
})

In order to avoid clicking the navigation to continuously send requests to the server, we can store the data obtained each time.

Of course, this method is only suitable for pages that do not consider SEO optimization.

I hope this article will be helpful to everyone’s jQuery programming.