Question

您好我在Bootstrap页面中遇到此问题：

。。

<a id="godown1">go!</a>

<a id="godown2">go!</a>

<a id="godown3">go!</a>

。。。。。

<div id="goit1"></div>

<div id="goit2"></div>

<div id="goit3"></div>

。。。代码下一步

    <script>       
        $(document).ready(function() {
        $("#godown1").click(function() {
        $('html,body').animate({scrollTop: $("#goit1").offset().top}, 2000);
        });
        });
    </script>
    <script>       
        $(document).ready(function() {
        $("#godown2").click(function() {
        $('html,body').animate({scrollTop: $("#goit2").offset().top}, 2000);
        });
        });
    </script>
    <script>       
        $(document).ready(function() {
        $("#godown3").click(function() {
        $('html,body').animate({scrollTop: $("#goit3").offset().top}, 2000);
        });
        });
    </script>

该代码必须在脚本中添加吗？事实证明，当我按下其中一个按钮时，它会自动下降。

但是当我已经到位并且我按下包含此动画的另一个按钮时，动画会再次重复。

这使它看起来不太令人愉悦。

我能支持吗？谢谢大家！

Answer 1

在查看您的link之后，我相信您所寻找的只是在隐藏.blogfootspace child div's时才运行动画。

您可以将代码合并到一个script和document ready函数中：

试试这个：

<script>       
    $(document).ready(function() {
        $("#godown1").click(function() {
            if(!$('.bloqsfootspace div').hasClass('in'))   
                $('html,body').animate({scrollTop: $("#goit1").offset().top}, 2000);
        });
        $("#godown2").click(function() {
            if(!$('.bloqsfootspace div').hasClass('in'))
              $('html,body').animate({scrollTop: $("#goit2").offset().top}, 2000);
        });
        $("#godown3").click(function() {
            if(!$('.bloqsfootspace div').hasClass('in'))
                $('html,body').animate({scrollTop: $("#goit3").offset().top}, 2000);
        });
    });
</script>

您需要更改godown和godoit以匹配您的代码，但.bloqsfootspace应保持不变。

性能动画如何滚动位置Bootstrap

1 个答案: