JQuery頁面滾動動畫僅適用於Chrome

我有以下兩個html文件。當您點擊第一頁（a.html）中的鏈接時，它會打開第二頁（b.html）並向下滾動到相關位置。我爲滾動添加了一個JQuery動畫。這在Chrome中完美工作，但在其他瀏覽器（如Firefox和IE）中不起作用。JQuery頁面滾動動畫僅適用於Chrome

a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 




    </head> 

    <body> 

     <a href="b.html#elementID">Jump</a> 

</body> 
</html>

b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('html, body').hide(); 

     if (window.location.hash) { 
      setTimeout(function() { 
       $('html, body').scrollTop(0).show(); 
       $('html, body').animate({ 
        scrollTop: $(window.location.hash).offset().top 
        }, 1000) 
      }, 0); 
     } 
     else { 
      $('html, body').show(); 
     } 
    }); 
</script> 


</head> 

<body> 





<div style="margin-top:4000px" id="elementID">AAAAAAAAAAAAA</div> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 
<h1>AAAAAAA</h1> 

</body> 
</html>

來源

2014-12-23 Ashan Perera

Firefox強制瀏覽器默認轉到哈希標記的位置。您需要重置頁面加載scrollTop然後使這樣的動畫：

$(document).ready(function() { 
     $('html, body').hide(); 

     if (window.location.hash) { 
      setTimeout(function() { 
       $('html, body').scrollTop(0).show(); 
       $('html, body').prop('scrollTop',0).animate({ 
        scrollTop: $(window.location.hash).offset().top 
        }, 1000) 
      }, 0); 
     } 
     else { 
      $('html, body').show(); 
     } 
    });

來源

2014-12-23 12:04:01 OnlyMAJ

這樣做的伎倆。謝謝。它現在完美。 –

試試這個.. 你有你的頁面加載的數據後滾動。

if (window.location.hash) { 
    $('html, body').show(); 
     $('html, body').animate({ scrollTop: $('html, body')[0].scrollHeight }, 1000); 

    }

來源

2014-12-23 11:57:09 tarzanbappa

JQuery頁面滾動動畫僅適用於Chrome

回答

相關問題