Javascript 创建没有插件的滚动页面。没有滚动效果

我正在尝试创建一个不使用插件的单页滚动网站。遵循本教程 链接可以工作，但没有滚动效果，它只是跳转到部分

JS

更新HTML以删除错误

<div id="container">

<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>

<div id="page1">
<a id="welcome"></a>
<h1></h1>

<div id="welcome_squares">

<div class="quarter-column">
    <h3></h3>
        <p></p>
</div>

<div class="quarter-column">
    <a href="#info">
        <div class="welcome_square">
            <img src="/pageassets/" alt="" />
        </div>
    </a>
</div>

<div class="quarter-column">
    <a href="#events">
        <div class="welcome_square">
            <img src="/pageassets/" alt="" />
        </div>
    </a>
</div>

<div class="quarter-column">
    <a href="#contact">
        <div class="welcome_square">
            <img src="/pageassets/" alt="" />
        </div>
    </a>
</div>

</div>
</div>

<div class="full-column" id="tiles">
<a id="info"></a>
//CONTENT
</div>

<div class="full-column" id="tiles">
<a id="events"></a>
//CONTENT
</div>

<div id="contact">
<a id="contact"></a>
</div>

</div>

---

您所提供的代码中有很多错误，因此很难判断您最初的问题是什么。这是一把基于你的例子的小提琴

我在文档中放置的锚上使用了id属性来标识要转到的字段的位置。我也没有将内容放在锚定标签中，因为这不是通常的做法。锚定标记是一个标记。但是我不明白为什么这会是一个太大的问题，尽管锚定标签上的href会将整个文本变成一个链接。正如你所看到的，由于我没有访问你的图像的权限，我在其中添加了一些填充内容，这样你就可以看到它滚动，但同样，这不会影响任何事情

您的问题可能不在您提供的代码中

关于代码的进一步说明：

我知道它是复制粘贴的，但是在每个//内容注释之后都有一个额外的注释，这使得它无法使用HTML 用于标识文档部分位置的锚也不需要href属性。他们需要的只是身份证，所以 在你的例子中变成

请注意，内容也不应该放在锚标记中。它应该在它下面。锚就像一个书签，用来标识页面的一部分

根据其工作原理，JQuery只是为了提供平滑的滚动。没有它就可以正常工作

---

嘿，这把小提琴在用

我遇到的错误

<div id="container">

    <div class="banner">
    <a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
    </div>

    <div id="page1">
    <a id="welcome" href="#"></a>
    <h1></h1>

    <div id="welcome_squares">

    <div class="quarter-column">
        <h3></h3>
            <p></p>
    </div>

    <div class="quarter-column">
        <a href="#info">
            <div class="welcome_square">
                <img src="/pageassets/" alt="" />
            </div>
        </a>
    </div>

    <div class="quarter-column">
        <a href="#events">
            <div class="welcome_square">
                <img src="/pageassets/" alt="" />
            </div>
        </a>
    </div>

    <div class="quarter-column">
        <a href="#contact">
            <div class="welcome_square">
                <img src="/pageassets/" alt="" />
            </div>
        </a>
    </div>

    </div>
    </div>

    <div class="full-column" id="tiles">
    <a id="info" href="#">INfo</a> //Here, you have used </div> instead of </a>
    </div>

    <div class="full-column" id="tiles">
    <a id="events" href="#"></a> //Here also, you have used </div> instead of </a>
    </div>

    <div id="contact">
    <a href="#" id="contact"></a>
    </div>

    </div>

您应该记住的几件事是，您正在呼叫您知道其id的特定div

比如说

那你就得用

---

不在家//错误的方式

控制台是否打印任何类型的错误？不，控制台中没有错误。如果两个div的ID相同。。。这很糟糕。如果您选择console.logtarget；和console.logtarget.length；发生了什么？浏览器可以按id滚动到divs tooname属性是。是的，即使修复了这些错误，平滑滚动效果也不起作用。它只是跳转到sections@user3005003这就是为什么我说你的问题可能在别的地方。因为我的小提琴确实有滚动效果。你的ID是错误的。我在代码之前遇到的错误消息没有任何意义，并且所讨论的代码指向锚定标记，而不是div，因此谈论div也没有任何意义。哦，是的，你的JSFIDLE也不起作用。@deltree，我知道了。但小提琴很好用。我又试了一次。只是为了验证，我把小提琴的显示部分做得很小，这样它实际上有一个滚动条，然后点击信息链接。它滚动到页面的顶部。因此，否：小提琴不起作用。是的，这是因为我在每个锚标记上添加了id=container来演示滚动是否起作用。@deltree单击hi，它将缓慢滚动到welcome Veeery，这是应该的。

<div id="container">

    <div class="banner">
    <a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
    </div>

    <div id="page1">
    <a id="welcome" href="#"></a>
    <h1></h1>

    <div id="welcome_squares">

    <div class="quarter-column">
        <h3></h3>
            <p></p>
    </div>

    <div class="quarter-column">
        <a href="#info">
            <div class="welcome_square">
                <img src="/pageassets/" alt="" />
            </div>
        </a>
    </div>

    <div class="quarter-column">
        <a href="#events">
            <div class="welcome_square">
                <img src="/pageassets/" alt="" />
            </div>
        </a>
    </div>

    <div class="quarter-column">
        <a href="#contact">
            <div class="welcome_square">
                <img src="/pageassets/" alt="" />
            </div>
        </a>
    </div>

    </div>
    </div>

    <div class="full-column" id="tiles">
    <a id="info" href="#">INfo</a> //Here, you have used </div> instead of </a>
    </div>

    <div class="full-column" id="tiles">
    <a id="events" href="#"></a> //Here also, you have used </div> instead of </a>
    </div>

    <div id="contact">
    <a href="#" id="contact"></a>
    </div>

    </div>