性能动画滚动位置 Bootstrap答案

【问题标题】：How Performance Animate Scroll position Bootstrap性能动画滚动位置 Bootstrap
【发布时间】：2013-11-26 15:07:07
【问题描述】：

您好，我在 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>

该代码必须添加到脚本中吗？事实证明，当我按下其中一个按钮时，它会以一种很好的方式自动下降。

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

这让它看起来不太顺眼。

我可以支持吗？感谢人们！

【问题讨论】：

我不太明白您的问题。也许您可以分享您的完整 html 并解释如何查看问题。我唯一能看到的是，如果您靠近goit1，然后单击godown1，则需要很长时间才能向下移动。这是您的问题吗？
如何私下发给你链接
您可以将链接发送到我的个人资料中的电子邮件。
谢谢。真的我在这个链接中看不到它的电子邮件：stackexchange.com/users/1009381/trevor 或这个：stackoverflow.com/users/1022305/trevor
嗯，好的，它是：trevordowdle@gmail.com

标签： jquery html css twitter-bootstrap jquery-animate

【解决方案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 应该保持不变。

【讨论】：

@KBLCreative 没问题，很高兴我能帮上忙 :)