mysql w3scoll_jquery中scrollTop在animate,移动端和电脑端设置无效的原因及解决办法

在做项目时，需要设置一个隐藏的元素的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这两者都加上就可以了。