jquery滾動動畫在Chrome瀏覽器上跳動

我遇到了jquery animate（）的問題，當單擊相應的鏈接時，會自動將頁面滾動到所需的div。它可以在FF和Safari中完美工作，但在Chrome中，點擊視圖可以非常快速地跳到div並返回到原始位置（可能是100ms），然後按照需要滾動到相關的div。我已經看到有jquery跳躍的帖子，但在其他瀏覽器未受影響時沒有專門針對chrome。jquery滾動動畫在Chrome瀏覽器上跳動

這裏是JS

function initialize_autoscroll(){ 
    //Auto Scrolling Based on clicked links 
    $('#home_button').click(function(){ 
    $('html, body').animate({scrollTop: 0}, 700); 
    }); 

    $('#features_button').click(function(){ 
    $('html, body').animate({ scrollTop: $("#features").offset().top -50}, 700); 
    }); 

    $('#examples_button').click(function(){ 
    $('html, body').animate({ scrollTop: $("#examples").offset().top -50}, 700); 
    }); 

    $('#pricing_button').click(function(){ 
    $('html, body').animate({ scrollTop: $("#pricing").offset().top -50}, 700); 
    }); 

    } 

$(document).ready(function(){ 
    initialize_autoscroll(); 
});

下面是一個示例將觸發滾動功能

<a id="features_button" href="#features"><i class="icon-plus"></i> Features</a>

下面是它鏈接到一個樣品的div標籤：

<div id="features" class="container-narrow" style="padding-bottom:50px"> 
</div

來源

2012-12-27 E T

你試過用'slow'而不是'700'嗎？ – Ulises

您需要使用Event.preventDefault()停止所有#anchors綁定中的默認操作。例如，

$('#home_button').click(function(evt){ 
    evt.preventDefault(); 
    $('html, body').animate({scrollTop: 0}, 700); 
});

來源

2012-12-27 16:11:19 Alexander

*謝謝*，工作就像一個魅力。 –

@ET，完美。不要忘記在已解決的問題中標記答案（http://meta.stackexchange.com/a/5235） – Alexander

jquery滾動動畫在Chrome瀏覽器上跳動

回答

相關問題