鏈接滾動到頂部不工作

我想不通這是爲什麼不給我一個動畫。它像它應該去頁面的頂部，但沒有動畫。有人可以幫我找出原因嗎？鏈接滾動到頂部不工作

此ID的JavaScript代碼

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 
$(document).ready(function() { 

    $('.scrollup').click(function(){ 
    $("html, body").animate({ scrollTop: target_top }, 600); 
    return false; 
    }); 

}); 
</script> 

</head> 

<body id="top">

，這裏是我需要進行滾動的鏈接。

<td><a href="#top" class="scrollup">Back to Top</a></td>

再次，它進入頁面的頂部，但沒有動畫。這裏

編輯是整個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>Home</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 
$(document).ready(function() { 

    $('.scrollup').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
    }); 

}); 
</script> 

</head> 

<body id="top"> 
<div id="header"> 
    <div class="container"> 
     <div id="title">Name</div> 
     <div id="tagline">Web Designer + Programmer</div> 
     <div id="navbar"> 
      <table> 
       <tbody> 
        <tr> 
         <td><a href="#services">Services</a></td><td><a href="#about">About</a></td><td><a href="#contact">Contact</a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

<div id="services"> 
    <div class="container"> 
     <div id="servicescontent"></div> 
    </div> 
</div> 

<div id="about"> 
    <div class="container"> 
     <div id="aboutcontent"></div> 
    </div> 
</div> 

<div id="services2"> 
    <div class="container"> 
     <div id="services2content"></div> 
    </div> 
</div> 

<div id="contact"> 
    <div class="container"> 
     <div id="contactinfo"></div> 
    </div> 
</div> 

<div id="footer"> 
    <div class="container"> 
     <div id="copyright">Copyright 2013</div> 
     <div id="footernavbar"> 
      <table style="font-size: 16px;"> 
       <tbody> 
        <tr> 
         <td><a href="#about">About</a></td><td><a href="#services">Services</a></td><td><a href="#top" class="scrollup">Back to Top</a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div></div> 
    </div> 
</div> 

</body> 
</html>

來源

2013-03-03 zachstarnes

它非常符合你的身體。此外，你應該添加一個到你的jQuery，並開始你的腳本在一個新的標籤下整理 – 2013-03-03 19:22:22

感謝您的建議。完成:) – zachstarnes 2013-03-03 19:35:50

@skidadon是正確的，0可能會解決這個問題。但是你也有一些格式不正確的腳本標籤。您需要Jquery的單獨標記，併爲您正在運行的代碼另外添加一個標記。它也可能有助於在事件處理程序的頂部使用event.preventDefault()。這裏是你的代碼的簡單編輯：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
       $('.scrollup').click(function(event){ 
        event.preventDefault(); 
        $("html, body").animate({ scrollTop: 0 }, 600); 
       }); 
     }); 
    </script> 
</head> 
<body id="top"> 

    <div style="height: 900px"> 
     Some content 
    </div> 
    <div> 
     <a href="#" class="scrollup">go to top</a> 
    </div> 
</body> 
</html>

希望有幫助。

來源

2013-03-03 19:24:39

那工作是腳本標籤非常感謝！ – zachstarnes 2013-03-03 19:30:56

這不是target_top，它的0

$("html, body").animate({ scrollTop: 0 }, "slow");

這應該做的伎倆。

來源

2013-03-03 19:08:59 skidadon

+1，打我吧http://jsfiddle.net/ZHrxp/ – 2013-03-03 19:11:20

抱歉，但沒有奏效。仍然沒有動畫:(感謝您輸入儘管 – zachstarnes 2013-03-03 19:11:28

@zachstarnes應該可以正常工作，請參閱小提琴 – 2013-03-03 19:12:34

鏈接滾動到頂部不工作

回答

相關問題