JQuery animated volume page returns top animation effects (compatible with Chrome) _ jquery

The JQuery animation page returns the top animation effect (compatible with Chrome). If you are learning jquery, you can test it. First, add a Class to the link 'back to top:
Back to Top
Then add the following jQuery code. You can put this line of code inOr other locations. Of course, you still needContains the jQuery library file. (

The Code is as follows:

JQuery (document). ready (function (){
JQuery ('. backtotop'). click (function (){
JQuery ('html'). animate ({scrollTop: 0}, 'low ');
}

Is that simple? Basically! However, jQuery ('html ') cannot be used to select the desired object in Safari and Chrome (remember to see where: chrome uses the safari core. Fortunately, we can use jQuery ('body') to replace these two browsers. Therefore, to make the code more compatible, we can add judgment on the browser. Here we use jQuery's jQuery. browser method. Note: In jQuery1.3, this method is not recommended. The jQuery. support method is added to jQuery1.3 to display the set of attributes of different browsers and bugs. That is to say, jQuery1.3 is not recommended to judge the browser, but it is recommended to directly judge a feature. However, I don't know which feature the selector should belong to. Therefore, I still use the old method. (The jQuery. browser method is supported in jQuery1.3)

The Code is as follows:

JQuery (document). ready (function (){
JQuery ('. backtotop'). click (function (){
If (jQuery. browser. safari) {// check whether the browser is safari.
JQuery ('body'). animate ({scrollTop: 0}, 'low ');
Return false; // if false is returned #
}
Else {
JQuery ('html'). animate ({scrollTop: 0}, 1500 );
Return false;
}
});
});

In the above code, I use jQuery ('body '). animate ({scrollTop: 0}, 'low'); you can change the speed of the page according to your actual needs. You can use 'low', 'quick', or a specific number, for example, 1000 (representing one second, note that no single quotation marks are required when using a specific number ). In addition, {scrollTop: 0} indicates that the header is returned. If you want to make the page volume to a specific position, you can use the tag (ID) method, for example: to move to a region with ID 'myid (

....

) Top, we can use a similar method, but we need to calculate the distance from this area to the top, the Code is as follows:

The Code is as follows:

JQuery ('body'). animate ({scrollTop: jQuery ('# myid'). offset (). top}, 'low ');
// JQuery ('# myid'). offset (). top can calculate the distance from the header in the region where ID is myID.