JQuery implements smooth scrolling between the links of the same page anchor.

JQuery implements smooth scrolling between the links of the same page anchor.

The front-end of web development has been using JQuery, and it is only possible that JQuery is much more powerful than I thought, or more powerful than I think, in particular, the compatibility is good, so I used all the fun and cool ones that can replace JavaScript.

Introduce the current question from JQuery, and use JQuery to implement smooth scrolling between anchor links. Previously, I introduced a special page anchor jump Buffer Effect implemented by JS. The effect is quite good and smooth scrolling can be achieved between the anchor links of the same page, but the JS Code is relatively lengthy, now, as long as JQuery has been loaded, we can use a relatively short code to achieve the same effect.

The usage is as follows:

1. Load 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 = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop: targetOffset }, 1000); return false; } } }); });

I still need to emphasize the loading sequence. I will reference the JQuery Class Library first. By the way, it has been tested that the rolling effect is compatible and applicable in various browsers. It is only a little weird in Opera and remains to be improved.

Jquery clicks the bookmark link to smoothly scroll to the corresponding position. How can this problem be achieved?

Jquery anchor smooth scrolling demo


Smooth jump of on-page class anchor implemented by jquery

$ ("# Div"). animate ({scrollTop: $ ("# div"). offset (). top}, 500 );