个人中心
gpt4 book ai didi

javascript - 滚动功能(从链接到部分标签)不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 03:37:59 24 4
gpt4 key购买 nike

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

如果您单击其中一个菜单链接，它应该顺畅地向下/向上滚动到相应的点(带有 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>

开始.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;
}

滚动.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”的 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 & CSS & JS 文件复制到 JSFiddle 并只编辑了 HTML 文件(比如删除 html 标签和它说要删除的东西)并且它在那里工作。但它仍然无法在我的 WebServer 上运行...我比较了中的代码我没有发现任何语法错误。

所以请帮助我解决这个问题!

最佳答案

您必须携带 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>标签必须在 body 外面!

为什么它适用于 fiddle ？

答案是因为 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;
    });
});

关于javascript - 滚动功能(从链接到部分标签)不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25316197/

24 4 0
文章推荐： 无法在 Centos 中的 FT230X 中设置 GPIO 引脚
文章推荐： php - 如何调试大型 PHP 应用程序的静默故障？
文章推荐： c - 了解简单 C 程序的汇编
文章推荐： PHP 在 Postgresql 服务器之间以不同方式解释字符串
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com