按下按钮即可跳转到下一个或上一个锚定标签（在移动设备上）

Question

我的Web应用程序中有5-6个表单部分。为了使在移动设备上导航更容易，我在屏幕底部添加了向上和向下箭头键。当用户按下这些键之一时，我希望它们分别跳到上方或下方。

我尝试使用WayPoint（https://github.com/imakewebthings/waypoints）来实现此功能，如下面的代码所示，但是“向上/向下”按钮无法正常工作（并且根本无法在移动设备上进行更新！）

表单部分的结构：

<div id="section-1" class="nav-section"></div>
<div id="section-2" class="nav-section"></div>
<div id="section-3" class="nav-section"></div>
...

在底部的栏中有两个按钮：

<button id="jump-section-up"><a href="#">Up</a></button>
<button id="jump-section-down"><a href="#">Down</a></button>

我正在获取要使用的所有元素：

  $(".nav-section").each(function(){
    sections.push(this.id);
  });

首次加载文档时。

使用航点

waypoints = $(".nav-section").waypoint(function(direction){
//Clear the previous hash (if any)
history.pushState("", document.title, window.location.pathname + window.location.search);
var cur=0, prev=0, next=0,
cur = jQuery.inArray($(this.element).attr("id").toString(), sections);
if(cur>0){
  prev=cur-1;
}
else{
  prev=0;
}

if(cur==sections.length-1){
next=cur;
}
else{
  next=cur+1;
}

$("#jump-section-up a").attr("href",$(location).attr("href")+"#"+sections[prev]);
$("#jump-section-down a").attr("href",$(location).attr("href")+"#"+sections[next]);
}, offset=25);

由于这是与移动设备相关的查询，因此按“ TAB”将不起作用。我很想知道是否有任何更聪明或更有趣的方式来做到这一点。

“向上”和“向下”按钮hrefs 在桌面上正确更新（偏移量不起作用，但是href确实得到了更新，我可以正确地向上/向下跳转部分），但在全部在移动设备上。任何帮助表示赞赏。谢谢！