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设置动画。

现场演示：

＆＃13;

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

＆＃13;

.content {
    margin-top: 500px;
}

＆＃13;

<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>

＆＃13;

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

jquery animate scroll不起作用

1 个答案: