Javascript 滚动功能（从链接到节标记）不工作_Javascript_Jquery_Css_Html_Scroll

Javascript 滚动功能（从链接到节标记）不工作

javascript jquery css html scroll

Javascript 滚动功能（从链接到节标记）不工作,javascript,jquery,css,html,scroll,Javascript,Jquery,Css,Html,Scroll,我正在用HTML5编写一个新的1站点网页。我在“标题”的顶部有一个菜单如果您点击其中一个菜单链接，它将平滑地向下/向上滚动到相应的点（带有id的“部分”）。我在这里找到了一个很好的示例，并将其包含到我的HTML文件中。看起来是这样的：更新的文件（index.html、start.css、scroll.js） index.html： <!DOCTYPE html> <html> <head>  <

我正在用HTML5编写一个新的1站点网页。我在“标题”的顶部有一个菜单

如果您点击其中一个菜单链接，它将平滑地向下/向上滚动到相应的点（带有id的“部分”）。我在这里找到了一个很好的示例，并将其包含到我的HTML文件中。看起来是这样的：

更新的文件（index.html、start.css、scroll.js）
index.html：

<!DOCTYPE html> <html> <head>  <title>Home</title>  <link href="layout/start.css" rel="stylesheet" type="text/css">  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="script/info.js"></script> <script src="script/scroll.js"></script> </head> <body>  <header> <div id="header_holder"> <div id="navi"> <li><a href="/">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#projects">Projects</a></li> <li>About</li> <li>Contact</li> </div> </div> </header>  <section id="home"> <div id="pages_holder"> Home </div> </section> <section id="news"> <div id="pages_holder"> News </div> </section> <section id="projects"> <div id="pages_holder"> Projects </div> </section> <section id="about"> <div id="pages_holder"> About </div> </section> <section id="contact"> <div id="pages_holder"> Contact </div> </section>  <footer> <div id="footer_holder"> 2014 | 94.247.218.142 </div> </footer> </body>
为了进行测试，我删除了包含“scroll.js”->的include标记，没有区别！因此，我在scroll.js文件的末尾添加了以下内容，以查看是否加载了jQuery：

if (typeof jQuery != 'undefined') { // jQuery is loaded => print the version alert("jQuery Version " + jQuery.fn.jquery + " loaded!"); }
警报显示。。。因此，我认为jQuery正在以我应该的方式运行…（？）
我还创建了一个JSFIDLE：在这里我输入了我的数据（复制和粘贴），我必须看到它的工作原理和它应该的一样！ 更新：新JSFIDLE:
大家能帮帮我吗？我不知道怎么了
更新：
我将我的HTML&CSS&JS文件复制到JSFiddle，只编辑HTML文件（比如删除HTML标记和它说要删除的东西），它在那里工作。但它仍然无法在我的Web服务器上运行。。。我比较了中的代码，没有发现任何语法错误

所以请帮我解决这个问题
您必须将html5
标记带到主体中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="script/scroll.js"></script> <body> <header> <div id="navi"> <li><a href="/">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#projects">Projects</a></li> <li>About</li> <li>Contact</li> </div> </header> <section id="home"> <div id="pages_holder"> Home </div> </section> <section id="news"> <div id="pages_holder"> News </div> </section>  </body>

如果它在小提琴上工作，但在你的页面上不工作，那么你的代码中可能还有其他原因导致了这个问题。谢谢回答。。。我将Body标记移到了标题之前（在上面的帖子中添加），但它仍然不起作用：/所以我更新了上面的index.html。。。（仍然没有滚动效果）只需更改jQuery？->在链接上没有反应。。。我不确定这里出了什么问题，但我100%确定代码是正确的！隐马尔可夫模型。。。它是我的网络服务器还是我的浏览器？？
if (typeof jQuery != 'undefined') { // jQuery is loaded => print the version alert("jQuery Version " + jQuery.fn.jquery + " loaded!"); }

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="script/scroll.js"></script> <body> <header> <div id="navi"> <li><a href="/">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#projects">Projects</a></li> <li>About</li> <li>Contact</li> </div> </header> <section id="home"> <div id="pages_holder"> Home </div> </section> <section id="news"> <div id="pages_holder"> News </div> </section>  </body>

$(document).on('click','a',function(e) { e.preventDefault(); var href = $(this).attr('href'); $root.animate({ scrollTop: $(href).offset().top - 100 }, 500, function () { window.location.hash = href; }); });