javascript - 无需插件即可创建滚动页面。无滚动效果

Question

我正在尝试创建一个不使用插件的单页滚动网站。按照本教程 https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2 链接有效，但没有滚动效果，它只是跳转到该部分。

JS

$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
    event.preventDefault();
    $('html, body').stop().animate({
        scrollTop: target.offset().top
    }, 1000);
}
});

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>

Answer 1

嘿，这是正在工作的 fiddle 。

https://jsfiddle.net/fj1dfcsr/2/

我遇到的错误。

<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="home"></div>

那么你就必须使用<a href="#home">Home</a>

不是 <a id="#home"> Home </a>//错误的方式