Jquery animated scroll page-Back to Top animation effects (compatible with Chrome)

First, add a class to the link 'back to top:

 
<A Href="#" Class="Backtotop" Target="_ Self">Back to Top</A>
 
 
<! -- Add class to all links that return to the top, for example, backtotop -->
 
Then add the following jqueryCodeYou can place this line of code before </body> or elsewhere. Of course, you also need to include the jquery library file in  
 
 
 
 
 
 
 
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.)
 
 
 
 
 
Jquery (document). Ready (Function(){
 
Jquery ('. backtotop'). Click (Function(){
 
 
If(Jquery. browser. Safari ){// Determine 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 you use 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 the ID of 'myid' (<Div id = "myid"> .... </div>) on the 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:
 
 
 
 
 
 jquery ('body '). animate ({scrolltop: jquery ('# myid '). offset (). top}, 'slow'); 
 
  // jquery ('# myid '). offset (). top can calculate the distance from the top in the region where the ID is myid