在做項(xiàng)目時(shí)，需要設(shè)置一個(gè)隱藏的元素的scrollTop，然后將其顯示。當(dāng)時(shí)使用了jQuery的scrollTop方法，但是無效，百度了許久，仍找不出有效的解決方法。于是自己新建了一個(gè)網(wǎng)頁用來測(cè)試scrollTop方法失效的原因，在一番折騰后，終于弄清楚了問題的原因和解決辦法。

     scrollTop失效的原因

   當(dāng)一個(gè)元素的display屬性為'none'時(shí)，對(duì)該元素設(shè)置scrollTop屬性是無效的，所以，即使是jQuery的scrollTop方法也會(huì)無效。

   解決辦法

   設(shè)置元素為可見狀態(tài)（el.style.display='block'），就可以設(shè)置原生的el.scrollTop屬性或者是jQuery的scrollTop方法了。

最近用到scrolloTop()想去獲取滾動(dòng)條距離頂部的距離，結(jié)果只有chrome下面可以正常的獲取scrollTop，結(jié)果ff和ie下這個(gè)值都等于0，使得許多效果比如屏幕滾動(dòng)等等均無法正常實(shí)現(xiàn)。究其原因是scrollTop()在各個(gè)瀏覽器中的兼容性問題，在ff和ie，以及是否有doctype聲明的時(shí)候都會(huì)有不同的效果。

下面是兼容各種瀏覽器的寫法，分別為獲取當(dāng)前的scrollTop和設(shè)置scrollTop：
 

//兼容方式獲取scrolltop以及設(shè)置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; 
    } 

測(cè)試后發(fā)現(xiàn)無兼容問題。

jquery mobile 使?jié)L動(dòng)條滾動(dòng)到底部scrollTop函數(shù)無效的解決方法

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

我們使用上面的scrollTop函數(shù)時(shí)發(fā)現(xiàn)滾動(dòng)后又閃回頂部，原因是在jquery mobile 中要使用另外的函數(shù)

$.mobile.silentScroll(100); 這個(gè)函數(shù)需要你點(diǎn)擊DIV再調(diào)用才有效果，如果一開始就設(shè)置是沒效果的

像下面用是沒效果的
 

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

需要像下面這樣才有效果
 

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

下面是在網(wǎng)上找到的，設(shè)置滾頓條位置
 

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

設(shè)置根據(jù)顯示時(shí)寬度的最大最小信息設(shè)置html斷點(diǎn)，我沒用過，我猜會(huì)讓斷點(diǎn)以后的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]); 


問題

正在開發(fā)移動(dòng)web,使用的是較為輕量的zepto.js,在移動(dòng)端chrome測(cè)試時(shí),突然發(fā)現(xiàn)返回頂部的功能失效,也沒有任何報(bào)錯(cuò)，其他瀏覽器都運(yùn)行通過，解決后記錄下來。

//這段代碼在chrome移動(dòng)端失效

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

解決辦法

有這個(gè)問題的更改為下列代碼

//將事件掛載到window對(duì)象上,就可以正常運(yùn)行了

$(window).scrollTop(0);

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

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

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

不被Firefox支持問題的解決。

其實(shí)是使用body的：
 

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

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

而使用html的：
 

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

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

如果想讓這段js被chrome和Firefox都支持的話，應(yīng)該這樣：
 

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

看到了嗎，就是將html和body這兩者都加上就可以了。
 

• jquery