使用jQuery scrollTop时消除抖动

我有一个功能，当按下键盘上的向下箭头时向下滚动到文章的下一部分，当按下向上箭头时向上滚动。它工作正常，但在滚动前有轻微的“反弹”或“抖动”

通过使用函数return false，我可以部分修复这个问题，但是，return false会吞噬按键关闭事件，使我无法使用键盘与浏览器交互

如何在释放键盘的同时消除“抖动”呢

var $sections = $('.section');
var curr = -1;

$(document).keydown(function(e){
  prev = (curr < 0)? $sections.length-1: curr-1;
  next = (curr >= $sections.length-1)? -1: curr+1 ;

  switch (e.keyCode) {
    case 38:  // up key
      s = $sections.eq(prev).offset().top;
      curr = prev;
      break;
    case 40:  // down key
      s = $sections.eq(next).offset().top;
      curr = next;
      break;
    default:
      break;
  } 

  if (curr == -1 ){
    $('html, body').animate({scrollTop: 0}, 'slow');
  }
  else{
    $('html, body').animate({scrollTop: s}, 'slow');
  }
  return e;
});

var$sections=$（'.section'）；
var curr=-1；
$（文档）.keydown（函数（e）{
prev=（当前值<0）？$sections.length-1:curr-1；
next=（curr>=$sections.length-1）？-1:curr+1；
开关（如钥匙代码）{
案例38://向上键
s=$sections.eq（prev.offset（）.top；
curr=prev；
打破
案例40://向下键
s=$sections.eq（next.offset（）.top）；
curr=next；
打破
违约：
打破
} 
如果（当前==-1）{
$（'html，body'）。动画（{scrollTop:0}，'slow'）；
}
否则{
$（'html，body'）.animate（{scrollTop:s}，'slow'）；
}
返回e；
});

假设您只需添加一个简单的

if

语句，该语句仅在

keyCode

上下匹配时执行滚动代码：

$(document).keydown(function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
        // Your code
        return false;
    }
});

下面是一个简单的演示：

---

---

查看代码时，您可能还应该使用

var

关键字来限制变量的范围

prev

、

next

和

s

。如果按下“向上”和“向下”以外的任何按钮，则当前代码的行为不稳定

谢谢Yi…作为替代…我刚刚通过将默认开关盒设置为返回e使其工作。然后，函数底部的返回返回false

结果如下所示：

var $sections = $('.section');
var curr = -1;

$(document).keydown(function(e){
  prev = (curr < 0)? $sections.length-1: curr-1;
  next = (curr >= $sections.length-1)? -1: curr+1 ;

  switch (e.keyCode) {
    case 38:  // up key
      s = $sections.eq(prev).offset().top;
      curr = prev;
      break;
    case 40:  // down key
      s = $sections.eq(next).offset().top;
      curr = next;
      break;
    default:
      return e;
  } 

  if (curr == -1 ){
    $('html, body').animate({scrollTop: 0}, 'slow');
  }
  else{
    $('html, body').animate({scrollTop: s}, 'slow');
  }
  return false;
});

var$sections=$（'.section'）；
var curr=-1；
$（文档）.keydown（函数（e）{
prev=（当前值<0）？$sections.length-1:curr-1；
next=（curr>=$sections.length-1）？-1:curr+1；
开关（如钥匙代码）{
案例38://向上键
s=$sections.eq（prev.offset（）.top；
curr=prev；
打破
案例40://向下键
s=$sections.eq（next）.offset（）.top；
curr=next；
打破
违约：
返回e；
} 
如果（当前==-1）{
$（'html，body'）。动画（{scrollTop:0}，'slow'）；
}
否则{
$（'html，body'）.animate（{scrollTop:s}，'slow'）；
}
返回false；
});

顺便说一句，易建联，感谢您分享到JSFIDLE的链接……我以前从未听说过它，但我可以看到它在未来非常方便。我更喜欢这个解决方案，因为它只测试哪个键被按下一次，不需要等待