在做項目時，需要設置一個隱藏的元素的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