jquery动画滚动不起作用

Question

我想用按钮为我的内容制作滚动效果。也许任何人都可以修复我的代码并解释它为什么不起作用？谢谢！

这是我的 HTML：

<div class="main">
<section class="section home">
    <header>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <h1>Home</h1>
            </div>
            <a href="#home-content" class="scroll">BUTTON</a>
        </div>
    </header>
    <div class="content" id="home-content">
        <p>
            My content
        </p>
    </div>
</section>
</div>

我的 js 文件： `

function scrollDown () {
        $('a[href="scroll"]').click(function(event) {
            event.preventDefault();
            var targetOffset = $('a[class="content"]').offset().top;
            $('.main').animate({
                scrollTop: targetOffset
            },1000);

        }); 
    }

`

Answer 1

这是一个演示，展示了如何使您的按钮在按下时将窗口向下滚动到您的内容。它为您的内容添加一个 margin-top 以将其推到视口底部下方，以便它可以展示滚动动作。

为了让它工作，我需要删除你的 scrollDown 函数，更改你的一些 jQuery 选择器，并为 html, body 上的 scrollTop 设置动画。

现场演示：

$('a.scroll').click(function(event) {
    event.preventDefault();
    var targetOffset = $('div.content').offset().top;
    $("html, body").animate({
        scrollTop: targetOffset + "px"
    },1000);
});

.content {
    margin-top: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<section class="section home">
    <header>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <h1>Home</h1>
            </div>
            <a href="#home-content" class="scroll">BUTTON</a>
        </div>
    </header>
    <div class="content" id="home-content">
        <p>
            My content
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquam sapien, nec accumsan odio. Nunc ac purus accumsan augue sodales malesuada ut at ipsum. Curabitur volutpat et risus ut ultrices. Fusce ante sapien, laoreet non scelerisque nec, elementum et nisl. Curabitur pharetra a sapien ac convallis. Aliquam dapibus viverra sem a lacinia. Proin tempor orci nec massa feugiat, ac tristique tellus convallis.
        </p>
    </div>
</section>
</div>

JSFiddle 版本：https://jsfiddle.net/vhaye0c0/1/