jquery's way to get the contents of a file and jump to an anchor point via load _jquery

Source: Internet
Author: User

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

Yesterday I was working on a page that was similar to a Help document, with navigation on the left and content displayed on the right. Originally intended to the right content display area with an IFRAME to achieve, but because to do the adaptive height of the iframe so a way to use jquery Ajax in the Load method.

Getting the contents of a remote file is easy to implement, using jquery's Load method directly:

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

This makes it easy to place the contents of the Xxx.aspx file in the label with the ID content. One effect now is that when I get the contents of a file, I jump to the appropriate anchor point, and I think of the scrolltop that uses jquery, for example, after I get the contents of the file, I want to tune to the label of Id= "name":

$ ("body,html"). Animate ({scrolltop:$ ("#name"). Offset (). Top});

Offset () is the relative offset of the matching element at the current viewport, $ ("#name"). Offset (). Top is the relative offset of the label with ID name in the current viewport distance. The above code is combined in a piece that needs to be written:

$ (function () {
 $ ("#content"). Load ("Xxx.aspx", function () {
  $ ("body,html"). Animate ({scrolltop:$ ("#name"). Offset (). Top});
 }

In order to avoid the constant click of navigation to send requests to the server, we can store the data each time we get.

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

I hope this article will help you with your jquery programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.