在做项目时，需要设置一个隐藏的元素的scrollTop，然后将其显示。当时使用了jQuery的scrollTop方法，但是无效，百度了许久，仍找不出有效的解决方法。于是自己新建了一个网页用来测试scrollTop方法失效的原因，在一番折腾后，终于弄清楚了问题的原因和解决办法。

     scrollTop失效的原因

   当一个元素的display属性为'none'时，对该元素设置scrollTop属性是无效的，所以，即使是jQuery的scrollTop方法也会无效。

   解决办法

   设置元素为可见状态（el.style.display='block'），就可以设置原生的el.scrollTop属性或者是jQuery的scrollTop方法了。

最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，结果ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题，在ff和ie，以及是否有doctype声明的时候都会有不同的效果。

下面是兼容各种浏览器的写法，分别为获取当前的scrollTop和设置scrollTop：
 

//兼容方式获取scrolltop以及设置scrolltop 
    function getScrollTop() { 
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
        return scrollTop; 
    } 
 
    function setScrollTop(scroll_top) { 
        document.documentElement.scrollTop = scroll_top; 
        window.pageYOffset = scroll_top; 
        document.body.scrollTop = scroll_top; 
    } 

测试后发现无兼容问题。

jquery mobile 使滚动条滚动到底部scrollTop函数无效的解决方法

$('body').scrollTop(100);

我们使用上面的scrollTop函数时发现滚动后又闪回顶部，原因是在jquery mobile 中要使用另外的函数

$.mobile.silentScroll(100); 这个函数需要你点击DIV再调用才有效果，如果一开始就设置是没效果的

像下面用是没效果的
 

$(document).ready(function() {
$.mobile.silentScroll(100);
});

需要像下面这样才有效果
 

$(document).ready(function() {
$('div').on('click',function(){$.mobile.silentScroll(100);});
});

下面是在网上找到的，设置滚顿条位置
 

//scroll to Y 100px  
$.mobile.silentScroll(100);

设置根据显示时宽度的最大最小信息设置html断点，我没用过，我猜会让断点以后的html不显示。$.mobile.addResolutionBreakpoints (method)Add width breakpoints to the min/max width classes that are added to the HTML element.
//add a 400px breakpoint 
$.mobile.addResolutionBreakpoints(400); 
//add 2 more breakpoints  
$.mobile.addResolutionBreakpoints([600,800]); 


问题

正在开发移动web,使用的是较为轻量的zepto.js,在移动端chrome测试时,突然发现返回顶部的功能失效,也没有任何报错，其他浏览器都运行通过，解决后记录下来。

//这段代码在chrome移动端失效

$(document.body).scrollTop(0);

解决办法

有这个问题的更改为下列代码

//将事件挂载到window对象上,就可以正常运行了

$(window).scrollTop(0);

jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决

jQuery中animate()的方法可以去w3school查看，这里主要说一下：
 

$("body").animate({"scrollTop":top})

不被Firefox支持问题的解决。

其实是使用body的：
 

$("body").animate({"scrollTop":top})

只被chrome支持，而不被Firefox支持。

而使用html的：
 

$("html").animate({"scrollTop":top})

只被Firefox支持，而不被chrome支持。

如果想让这段js被chrome和Firefox都支持的话，应该这样：
 

$("html,body").animate({"scrollTop":top})

看到了吗，就是将html和body这两者都加上就可以了。
 

• jquery