javascript - 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 以将其推到视口(viewport)底部下方，以便它可以展示滚动操作。

为了让它正常工作，我需要删除您的 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/