jquery - Bootstrap 如何实现动画滚动位置

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

查看您的链接后，我相信您正在寻找的是仅在.blogfootspace 子div 的 被隐藏时运行动画。

您可以将您的代码合并到一个脚本和文档就绪函数中:

试试这个:

<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 应保持不变。