JQuery enables smooth scrolling between anchor points in the same page

Web Development front-end has been using JQuery, real contact to realize that JQuery is more powerful than I imagined, it may be more powerful than I realized, especially the compatibility that good, so put some fun, cool, can replace JS, all to use.

Introduce today's topic from jquery and use jquery to achieve smooth scrolling between anchor links. Previously introduced a page with JS implementation of the anchor point jump buffer effect, the effect is quite good, can be in the same page between the anchor link to achieve smooth scrolling, but the JS code relatively verbose, now good, as long as we have loaded JQuery, we can use a relatively short code to achieve the same effect.

Use the following methods:

1, load into the JQuery library;

2, Key code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16

$ (document). Ready (function () {$ (' a[href*=#] '). Click (function () {if (Location.pathname.replace (/^//, ') = =  This.pathname.replace (/^//, ') && location.hostname = = this.hostname) {var $target = $ (This.hash); $target = $target. Length && $target | |  $ (' [name= ' + this.hash.slice (1) + '] ');  if ($target. length) {var targetoffset = $target. Offset (). Top;  $ (' html,body '). Animate ({Scrolltop:targetoffset}, 1000);  return false;  }  }  }); });

Or to emphasize the order of loading, the jquery class library is referenced first. By the way, after testing, the scrolling effect is compatible with all browsers, only in Opera under the performance of a little weird, still need to improve.