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
Post a Comment