Question

我做了一个简单的应用程序，点击一个按钮（导航栏中的链接）平滑滚动到页面上的特定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>

Answer 1

我能够测试你的jquery，当调用body时，html确保你把它们放在相同的引号中，否则它们不会在html5中触发：

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

当我输入html5 doctype声明时，jquery无法正常工作

1 个答案: