链接滚动到顶部不工作

我想不通这是为什么不给我一个动画。它像它应该去页面的顶部，但没有动画。有人可以帮我找出原因吗？链接滚动到顶部不工作

此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

链接滚动到顶部不工作

回答

相关问题