今天，超級低調的高手 Willin 共享了一種完美方法解決 jQuery 實現滾動效果在 Opera 下的bug，我隨即除錯+應用到我目前的主題，目前經過測試非常完美，特意貼出程式碼加以說明。

因為本人不太懂 js，jQuery 也只是皮毛，原理方面我說不清楚，只能說明修改方法。

演示：點選現在的主題 zOM 底部的“Δ”/文章頁面標題下面的“x comments”  “Leave a comment”

假設：你的主題最上面的 id 是 header，最下面的“返回頂部”的 id 為 top

jQuery 程式碼如下：

jQuery(document).ready(function($) {
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');// 這行是 Opera 的補丁, 少了它 Opera 是直接用跳的而且畫面閃爍 by willin

    $('#top').click(function(){
        $body.animate({scrollTop: $('#header').offset().top}, 1000);
        return false;// 返回false可以避免在原連結後加上#
    });
});
 

說明：直接看註釋

$('#top').click(function(){...}); 這是滾動基本程式碼，可以根據自個情況變通，也就是舉一反三了，如：既然可以返回頂部，那麼就可以滾動到底部、滾動到某一個 id、滾動到中間……

那麼我再貼出一個滾動到“評論框”的例子：

例子前提假如：文章標題下面有個“新增評論”，原來的html如下

<div id="add-comment"><a href="http://banu.blog.163.com/blog/#respond"></a></div>

（注：#respond 是評論框的 id）

那麼 $('#top').click(function(){...}); 這段程式碼就變為如下：

$('#add-comment').click(function(){
    $body.animate({scrollTop: $('#respond').offset().top}, 1000);
    return false;
});

這樣就行了，簡單不？有些朋友說原理，學jQ去吧

(轉自http://zww.me/archives/25144)    

zepto API參考 

https://www.cnblogs.com/stephenykk/p/5376505.html