Question

我正在HTML5中编写一个新的1 Site WebPage。我在“标题”中有一个菜单。

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

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

的index.html：

<!DOCTYPE html>
<html>
<head>
    <!-- Title -->
    <title>Home</title>

    <!-- Layout -->
    <link href="layout/start.css" rel="stylesheet" type="text/css">
    <!-- Font -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <!-- Scripts -->

    <!-- jQuery -->
    <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/Navi -->
    <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>

    <!-- Body -->
    <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 -->
    <footer>
        <div id="footer_holder">
            2014 | 94.247.218.142
        </div>
    </footer>
</body>

start.css：

    /* <-- Start Layout --> */
*{
    margin: 0px;
    padding: 0px;
}

html {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

/* --Link Decoration-- */
a {
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #000;
}

a:visited {
    color: #000;
}

/* --Header-- */
header {
    width: 100%;
    position: fixed;
    border-radius: 0px 0px 4px 4px;
    background-color: #4CACE7;
}

#header_holder {
    height: 100px;
    width: 810px;
    line-height: 100px;
    font-size: 22px;
    text-align: center;
    margin: 0px auto 0px auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* --Navi-- */
#navi {
    text-align: center;
    float: right;
    font-size: 18px;
}

#navi li {
    height: 100px;
    width: 75px;
    float: left;
    list-style: none;
}

#navi li:hover {
    height: 96px;
    border-bottom: 4px solid white;
    transition: all 0.2s;
}

#navi a {
    color: #fff;
}

#navi a:hover {
    text-decoration: none;
}

/* --Body-- */
body {
    height: 100%;
    background-color: yellow;
}

/* Pages */
section {
    height: 774px;
}

#pages_holder {
    height: 100%;
    width: 810px; /* Total length Body */
    font-size: 18px;
    margin: 0px auto 0px auto;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

#home {
    padding-top: 100px;
    background-color: #fff;
}

#news {
    background-color: #223759;
}

#projects {
    background-color: #fff;
}

#about {
    background-color: #223759;
}

#contact {
    background-color: #fff;
}

/* --Footer-- */
footer {
    width: 100%;
    border-radius: 4px 4px 0px 0px; /* Border 4px */
    background-color: #4CACE7;
}
#footer_holder {
    height: 50px;
    width: 810px; /* Total length Body */
    line-height: 50px;
    font-size: 14px;
    text-align: right;
    margin: 0px auto 0px auto;
    padding-top: 0.4%;
    padding-bottom: 0.4%;
    padding-left: 20px;
    padding-right: 20px;
}

scroll.js：

//Scrolling Animation

var $root = $('html, body');
$('a').click(function () {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top - 100
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

为了测试，我删除了包含“scroll.js” - ＆gt;的include标签。没有区别！所以我在scroll.js文件的末尾添加了这个以查看是否加载了jQuery：

 if (typeof jQuery != 'undefined') {  
    // jQuery is loaded => print the version
    alert("jQuery Version " + jQuery.fn.jquery + " loaded!");
 }

警报显示......所以我认为jQuery正在运行我是怎么回事......（？）

我还创建了一个JSFiddle：http://jsfiddle.net/ULeuu/83/我输入了我的数据（复制和粘贴），我不得不看到它的作用就像它一样！ 更新：新JSFIDDLE： http://jsfiddle.net/6a8vuae7/2/

大家能帮助我吗？我不知道出了什么问题！

更新

我复制了我的HTML＆amp; CSS＆amp; JS文件到JSFiddle并且只编辑了HTML文件（比如删除html标签和它要删除的东西）并且它在那里工作。但它仍然无法在我的WebServer上运行...我比较了代码，我没有发现任何语法错误。

所以请帮助我对这个问题绝望！

Answer 1

您必须将html5 <header>标记带入正文：

<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>
    <!-- More Sections... -->
</body>

你可能误认为它必须在身体外的<head>标签！

为什么它适用于小提琴？

答案是答案是因为jsfiddle将整个代码包装在<body>标记内，所以好像<header>标记 IS 实际上位于<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;
    });
});

滚动功能（从链接到章节标记）不起作用

1 个答案: