html5 doctype 선언을 넣을 때 jquery가 작동하지 않습니다.

버튼을 클릭하면 특정 div에 부드럽게 스크롤되는 간단한 응용 프로그램을 만들었지 만 내 페이지 상단에 html5 선언을 넣으면 ? 선언을 work.Without하지가 여기에 fine.Can 사람의 도움을 주시기 바랍니다 작동하는 것은 내 코드입니다 :html5 doctype 선언을 넣을 때 jquery가 작동하지 않습니다.

<!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>

출처

2014-09-09 admir

jQuery 스크립트 태그를 닫아야합니다 :'다른 JavaScript를 시작하기 전에. – bencripps

doctype없이 작동하는 경우, 아마도 quirks 모드에서 css를 읽었을 것입니다 - 나는 당신의 css 코드와 관련이 있다고 생각합니다. 어떤 브라우저를 사용하고 있습니까? 파이어 폭스를 사용하면 페이지를로드 할 수 있습니다. – Truefeel

파이어 폭스를 사용 중이고 페이지를로드 할 수 있지만 자동 스크롤이 작동하지 않습니다. 크롬에서 열면 doctype도 잘 작동합니다. – admir

난 당신 jQuery를 테스트 할 수 있었고, HTML 몸을 호출 할 때이 같은 인용문에서 둘 다 넣어 확인 그렇지 않으면 html5에서 실행되지 않습니다 :

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

출처

2015-01-02 06:51:28

html5 doctype 선언을 넣을 때 jquery가 작동하지 않습니다.

답변

관련 문제