javascript - jquery not working when i put html5 doctype declaration -


i made simple app smooth scrolls specific div on page on click of button(link in navbar) when put html5 declaration on top of page not work.without declaration works fine.can please?here code:

<!doctype html><!--remove declaration make 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> 

i able test jquery , when calling body, html make sure put them both in same quotations otherwise won't fire in html5:

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

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

jsf - How to ajax update an item in the footer of a PrimeFaces dataTable? -

django - CSRF verification failed. Request aborted. CSRF cookie not set -