jQuery平滑滚动锚点问题

Question

我是jQuery的新手，正在尝试实现平滑滚动到Web项目上的div。 出于某种原因，当我创建一个新的基本html测试页并添加用于滚动的js时，它可以工作。 但是，当我将完全相同的代码导入到我的主项目中时，它实际上并没有滚动，而是在稍微停顿之后直接跳到了预期的div。 我不知道为什么它将在测试页上而不是在我的实际项目中起作用。 是否有人对导致此问题的原因有任何想法？ 任何帮助将非常感激！ 谢谢。

我在头中定义了以下脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/script.js"></script>

HTML：

<div id="mainContent">
    <section id="splash">
        <div class="banner">

        </div>

        <div id="intro">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <a href="#productInfo">LEARN MORE</a>
        </div>

    </section>

    <div id="productInfo">
            </div>

在script.js中：

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
});

Answer 1

摆弄小提琴

下面是代码，

HTML：

<section id="splash">
    <div class="banner"></div>
    <div id="mainContent">
        <div id="intro">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <a href="#productInfo">LEARN MORE</a>
        </div>
    </div>
</section>
<div id="productInfo">test tests</div>

CSS：

#productInfo { background:gray; color:#000; margin-top:400px; padding:10px; height:1000px;}

jQuery的：

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;

    });
});
});