Javascript 当我放入html5 doctype声明时，jquery不工作_Javascript_Jquery_Css_Html

Javascript 当我放入html5 doctype声明时，jquery不工作

javascript jquery css html

Javascript 当我放入html5 doctype声明时，jquery不工作,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我制作了一个简单的应用程序，点击导航栏中的按钮链接可以平滑滚动到页面上的特定div，但当我将html5声明放在页面顶部时，它不起作用。如果没有声明，它就可以正常工作。有人能帮我吗？下面是我的代码： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jqu

我制作了一个简单的应用程序，点击导航栏中的按钮链接可以平滑滚动到页面上的特定div，但当我将html5声明放在页面顶部时，它不起作用。如果没有声明，它就可以正常工作。有人能帮我吗？下面是我的代码：

<!DOCTYPE html><!--remove declaration to make it work-->
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">      </script>

<style>
body{margin:0px;padding:0px;}

#menu{position:fixed;}
#menu ul{margin:0px;padding:0px;list-style:none;}
#menu li {float:left;width:100px;background-color:black;text-    align:center;transition:background 0.5s linear 0s;}
#menu li:hover{background-color:#00cc00;}
#menu ul li a{text-    decoration:none;padding:8px;margin:5px;color:yellow;display:block;transition: color 0.3s     linear 0s;}
#menu ul li a:hover{color:black;}
.stotka{height:700px;}
.bor{border-right:1px solid yellow;}
</style>
</head>
<body>
<script>
$(document).ready(function(){
var crveni=document.getElementById("crveni").offsetTop;
var plavi=document.getElementById("plavi").offsetTop;
var zuti=document.getElementById("zuti").offsetTop;
var zeleni=document.getElementById("zeleni").offsetTop;
    $("#top").click(function(){
        $("body","html").animate({scrollTop:0},1000);
        return false;
    });
    $('[href=#blue]').click(function(){
        $('body','html').animate({scrollTop:plavi},1000);
        return false
    });
    $('[href=#red]').click(function(){
        $('body','html').animate({scrollTop:crveni},1000);
        return false
    });
    $('[href=#yellow]').click(function(){
        $('body','html').animate({scrollTop:zuti},1000);
        return false
    });
    $('[href=#green]').click(function(){
        $('body','html').animate({scrollTop:zeleni},1000);
        return false
    });

});
</script>
<div id="menu">
<ul>
<li class="bor"><a href="#blue">Home</a></li>
<li class="bor"><a href="#red">About</a></li>
<li class="bor"><a href="#yellow">Portfolio</a></li>
<li><a href="#green">Contact</a></li>
</ul>

</div>
<div id="cont">
<div id="plavi" class="stotka" style="background-color:blue;"><a href="blue"></a>
<p style="margin:auto;width:100px;position:relative;top:350px;">Admir</p>
</div>
<div id="crveni" class="stotka" style="background-color:red;"><a href="red"></a><p style="margin:auto;width:100px;position:relative;top:350px;">Admir</p></div>
<div id="zuti" class="stotka" style="background-color:yellow;"><a href="yellow"></a><p style="margin:auto;width:100px;position:relative;top:350px;">Admir</p></div>
<div id="zeleni" class="stotka" style="background-color:green;"><a href="green"></a><p style="margin:auto;width:100px;position:relative;top:350px;">Admir</p></div>
</div>
<a id="top" href="#">To Top</a>
</body>
</html>

我能够测试您的jquery，在调用body时，html确保将它们放在相同的引用中，如下图所示，否则它们不会在html5中触发：

$('[href=#blue]').click(function(){
    $('body, html').animate({scrollTop:plavi},1000);
    return false
});

您需要关闭jQuery脚本标签：在开始另一个JavaScript之前。如果它只在没有doctype的情况下工作，那么它可能是在怪癖模式下读取您的css-我猜它与您的css代码有关。你用的是什么浏览器？使用firefox，我可以加载页面。我使用的是firefox，我也可以加载页面，但自动滚动不起作用。当我在chrome中打开页面时，即使使用doctype@bencripps关闭脚本标记是什么意思？如果在添加jQuery时没有看到第一个标记被关闭，那么所有我的脚本标记都会正确关闭您需要关闭脚本标记：