Question

我正在使用按钮点击事件向下滚动整个页面。当我更改jquery animate（）函数的duration参数时，速度似乎没有改变。我做错了什么？

这是我的代码：

    $("#arrowdown").click (function(){
        $("html, body").animate(
        {
            scrollTop: $("#second-page").offset().top
        }, 
        100//no matter how I changed here, the speed haven't change at all.
        );
    })

Answer 1

我前段时间写了一些非常类似的代码，虽然你没有说#arrowdown项目是一个链接，但我打赌它是指向＃second-page（href） =＆＃39;＃second-page＆＃39;）如果是这样的情况，它会向右跳到页面，根本就没有动画。

试试这个：

$("#arrowdown").click (function(e){
    e.preventDefault();
    $("html, body").animate(
    {
        scrollTop: $("#second-page").offset().top
    }, 
    1000
    );
})

最大的变化是function(e)和e.preventDefault();，这会阻止默认操作覆盖您想要发生的事情。

Answer 2

Ok一个原因可能是你的文字不够长，我按顺序分配了一个选择下拉菜单选择一个速度，然后点击向下箭头它会根据需要占用速度

$('select').on('change', function(){
  $("html, body").scrollTop(0);
  var v = parseInt($(this).val());
  $("#arrowdown").off('click').on('click', function(){
     $("html,body").animate(
       {'scrollTop': $("#second-page").offset().top}, v
     );
  });
}).trigger('change');


//just to make text long //ignore
var x = $('div.dum').text();
for(var i=0; i<5; i++){
  x+=x;
}$('div.dum').text(x)

#botton{
  width:200px;height:40px;
  background:#ccc;
  position:fixed;
  bottom:0;
  right:0;
  padding:5px;
}

#botton > Button, #botton > select{float:left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=dum>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<span id="second-page">Hello second</span>
<div id=botton>
  Select a speed in seconds<select>
    <option value=100>100</option>
    <option value=500>500</option>
    <option value=1000>1000</option>
    <option value=2000>2000</option>
  </select>
  <button id="arrowdown">Click Down Arrow</button>
</div>

Answer 3

100 = 0.1秒，尝试811和/或{scrollTop：$（document）.height（）}

$("#arrowdown").click (function(){
    $("html, body").animate(
    {
        scrollTop:$(document).height()
    }, 
    811
    );
})

Answer 4

尝试以下代码 -

$("#arrowdown").click (function(){
        $("html body").animate(
        {
            scrollTop: $("#second-page").offset().top
        }, 
        100//no matter how I changed here, the speed haven't change at all.
        );
    })

你不要在html body之间加上逗号。

jquery动画速度不变

4 个答案: