scrollTop - 第二次点击不起作用答案

【问题标题】：scrollTop - the second click not workingscrollTop - 第二次点击不起作用
【发布时间】：2017-10-11 14:17:00
【问题描述】：

我有两个简单的 div，点击时，运行 scrollTop 以移动到网站的某个部分。

问题如下：

我单击“提出报价”div。这将我带到了正确的位置。
如果我随后单击“分期付款”div，它会滚动到页面顶部。

需要：始终滚动到正确的点。

div：

 <div id="button" class="Alan_button_blue">Make an Offer</div>

 <div id="instalments" class="Alan_button_2">Instalments</div>

两个div的两个脚本分别是：

<script type="text/javascript">
   $(document).ready(function(){
       $("#button").click(function(){
           var offset = 1; //Offset of 1px
           $('body, html').animate({
               scrollTop: $("#section5").offset().top + offset
           }, 1500);
       });
   });      

   $(document).ready(function(){
       $("#instalments").click(function(){
           var offset = 1; //Offset of 1px
           $('body, html').animate({
               scrollTop: $("#section6").offset().top + offset
           }, 1500);
        });
    });     
</script>

如果有人能帮忙，那就太好了！

【问题讨论】：

您的#section6 div 在页面上的什么位置？它靠近顶部吗？
嗨 Mohit -- 所以 #section6 在 html 的 #section 下方。我正在考虑将 div 更改为按钮...也许可以这样做...

标签： jquery jquery-animate

【解决方案1】：

我已经测试了您的代码，它运行良好。我不能说是什么问题...

        $(document).ready(function(){
            $("#button").click(function(){
                var offset = 1; //Offset of 1px
                $('body, html').animate({
                    scrollTop: $("#section5").offset().top + offset
                }, 1500);
            });
        });      

        $(document).ready(function(){
            $("#instalments").click(function(){
                var offset = 1; //Offset of 1px
                $('body, html').animate({
                    scrollTop: $("#section6").offset().top + offset
                }, 1500);
                });
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


        <div id="button" class="Alan_button_blue" style="padding:50px;background:lightgray;margin-bottom:50vh;">Make an Offer</div>

        <div id="section5" style="width:100%;height:50vh;background:#aaafff"></div>
        
        <div id="instalments" class="Alan_button_2" style="padding:50px;background:darkblue;color:white;margin-bottom:50vh;">Instalments</div>
        
        <div id="section6" style="width:100%;height:50vh;background:#333333"></div>
        
        <div style="height:75vh;"></div>

【讨论】：