jQuery实现兼容Chrome/Safari的返回顶部动画特效

jQuery返回顶部基础实现

首先，需要为页面上所有用于返回页面顶部的链接添加一个特定的Class属性。

<a href="#" class="backtotop" target="_self">返回页首↑</a>

将上述HTML代码中的链接都加上class，例如设置为backtotop。接着，在页面底部（</body>标签之前）或其他合适位置引入jQuery库文件，并添加以下jQuery代码。

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

解决Chrome与Safari兼容性问题

这段代码看似简单，但在Safari和Chrome浏览器（Chrome基于Safari内核）中，直接选择jQuery('html')可能无法正确选中目标对象。为了解决兼容性问题，可以在这些浏览器中使用jQuery('body')进行替代。为了增强代码的通用性，可以加入浏览器判断逻辑，这里使用了jQuery提供的jQuery.browser方法。需要注意的是，在jQuery 1.3版本中，jQuery.browser方法已被弃用，官方推荐使用jQuery.support方法来检测浏览器特性。但由于无法确定该选择器问题属于哪个具体特性，且jQuery 1.3仍支持旧方法，因此此处仍采用浏览器判断的方式。

 
jQuery(document).ready(function() {
jQuery('.backtotop').click(function(){
if(jQuery.browser.safari) {//这里判断浏览器是否为safari
jQuery('body').animate({scrollTop:0}, 'slow');
return false;//返回false可以避免在原链接后加上#
} 
}else{
jQuery('html').animate({scrollTop:0}, 1500);
return false;
} 
}); 
}); 

自定义滚动速度与定位特定区域

在上述代码中，使用了jQuery('body').animate({scrollTop:0}, 'slow')来实现滚动效果。用户可以根据实际需求调整滚动速度，参数可以是'slow'、'fast'或具体的毫秒数（如1000代表1秒，注意使用数字时不加引号）。{scrollTop:0}表示滚动到页面顶部。如果希望滚动到页面中某个特定位置，可以通过计算该位置距离顶部的偏移量来实现。例如，若要滚动到ID为'myID'的区域（<div id="myID">....</div>）顶部，需先计算该区域距离页首的距离，然后使用类似方法，代码如下：

 
jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
//jQuery('#myID').offset().top可以计算ID为myID的区域里页首的距离