JQuery animated page scroll Back to top Animation effects (compatible with Chrome)_jquery

First, add a Class to these 'return to top' links:
Return to top↑
Then add the following jQuery code. You can place this line of code before , or in other locations. Of course you also need to include the jQuery library file in the . (

Is it that simple? Basically! But using jQuery ('html') can't select the object we want in Safari and Chrome (I remember seeing it somewhere: chrome uses the core of safari). Under these two browsers, we can use jQuery('body') instead. Therefore, in order to make the code more compatible, we can add browser judgment. Here we use the jQuery.browser method provided by jQuery. . Note: In jQuery1.3, this method is no longer recommended. jQuery1.3 adds a new jQuery.support method to display the property collection of different browsers' respective features and bugs, which means that jQuery1.3 is no longer recommended. To judge the browser, it is recommended to judge a certain feature directly. But I don't know which feature this selector problem should belong to, so I still use the old method (jQuery.browser method in jQuery1.3. Still supported)

In the above code, I use Go to jQuery('body').animate({scrollTop:0}, 'slow'); We can change the scroll speed according to actual needs. You can use 'slow', 'fast', or use a specific number, such as 1000 (Represents one second, please note that you do not need to add single quotes when using specific numbers). In addition, {scrollTop:0} means returning to the top of the page. If you just want the page to scroll to a specific location you want, we can use the label (ID) method, for example: you want to move to an area with the ID 'myID' () At the top, we can use a similar method, but first calculate the distance between this area and the top of the page. The code is as follows: