jquery动画滚动不起作用

Posted 2023-03-14

【中文标题】jquery动画滚动不起作用

【英文标题】：jquery animate scroll doesn't work

【发布时间】：2015-09-02 18:30:52

【问题描述】：

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

这是我的 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);

        ); 
    

`

【问题讨论】：

$('a.scroll') 使用这个。

我尝试了所有这些调用，仍然不起作用。

您包括哪些库？我的意思是，你是只引用 jQuery，还是引用 jQueryUI？

您确定，此功能已注册？尝试在函数中添加警报，看看是否至少调用了该函数。我的直觉说它没有附加到按钮链接。尝试将函数放入$(document).ready();

我只使用 jQuery 库

【参考方案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/

【讨论】：

非常感谢！我的选择器没有看到这个错误！