Question

我想要一个简单的向下滚动按钮，它将向下移动到section。我已经尝试了每个该死的按钮和jQuery和Javascript就可以做到这一点，但它不会发生。

它将它链接到该部分并移动到那里，但这一切都是即时发生的，没有慢动画，几乎就像它不能识别Javascript或jQuery一样。

这是按钮所在的div。

这是我正在使用的jquery，我在按钮下方，它位于<script>标签之间。

var scrolled=0;  $(document).ready(function(){
     $("#downClick").on("click" ,function(){
       scrolled=scrolled+100;

       $("html, body").animate({
               scrollTop:  scrolled
          });
     });

 });

body {
height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
   <button id='downClick'>Go Down</button>
</div>

Code Snippet按照我的意愿工作，但是在laravel中它只是瞬间传送到指定的部分。

有人可以告诉我为什么不动画吗？

Answer 1

您未指定动画的速度，默认情况下快，请尝试以下操作：

var scrolled = 0;  
$(document).ready(function() {
   $("#downClick").on("click" ,function() {
       // I assume scrolled is the height of the element you want to scroll to
       scrolled = scrolled + 100;
       $('body,html').animate({ scrollTop: scrolled }, 800);
   });
});

Answer 2

尝试使用scrollTop: scrolled

替换scrollTop: $(document).height()

注意：注意使用$（window）.load（加载图像时...占用高度）而不是document.ready。

参考：jQuery Scroll To bottom of the page

更新：要滚动到特定部分，请将scrollTop: $(document).height()改为$("#my_section_to_scroll_to").offset().top

var scrolled=0;  $(document).ready(function(){
     $("#downClick").on("click" ,function(){
       scrolled=scrolled+100;

       $("html, body").animate({
               scrollTop:  $("#my_section_to_scroll_to").offset().top
          });
     });

 });

body {
height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-scroll">
   <button id='downClick'>Go Down</button>
</div>
<div id="my_section_to_scroll_to" style="margin-top:300px;border:solid 1px">
my_section_to_scroll_to
</div>

Answer 3

如果你想要在文档的底部，你可以使用它。

var scrolled=0;  $(document).ready(function(){
    $("#downClick").on("click" ,function(){
       scrolled = $(document).height()

        $("html, body").animate({
            scrollTop: scrolled
        });
    });

});

但是你可以使用它来降低一个元素的高度..或div或者如果你使用+你可以滚动多个div高度！

向下滚动按钮不起作用

3 个答案: