JQuery implements smooth scrolling between anchor links

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

From jquery to the point of today, use jquery to achieve smooth scrolling between anchor links. Previously introduced a JS implementation of the page anchor jump buffer effects, the effect is quite good, can be in the same page of the anchor link between the smooth scrolling, but the JS code is relatively lengthy, now well, as long as the JQuery has been loaded, we can use a shorter code to achieve the same effect.

Here's how to use it:

1. Load into the JQuery library;

2. Key code:

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

Or do you want to emphasize the order of loading, first referencing the jquery class library. By the way, after testing, the scrolling effect is compatible with all browsers, and it's only a bit weird under Opera and needs to be improved.

JQuery implements smooth scrolling between anchor links