Question

我没有找到任何适合我的例子。我需要做什么：

我有一个包含可变数量div的页面，都有class = "item-elm"。我有2 arrows, up & down，当用户点击其中一个箭头时，身体必须滚动以获得下一个div等等...

但我也必须允许经典mouse/touch滚动，因此每次用户点击(without fading/showing items)箭头时，脚本都必须'next' or 'prev'滚动到下一个项目。

我是一个noob jquery用户，所以我的工作： - 单击箭头时滚动到绝对顶部或底部 - 滚动到第一个元素

尝试使用serialscroll，但没有奏效，我认为在尝试使用此功能时出现了问题

编辑：我试过：在项目上使用Uikit scrollspy来动态添加“active-elm”类data-uk-scrollspy="{cls: 'active-elm', repeat: true}" 然后“点击”向下箭头，我正在运行：

 function nextScroll() { 
    var scrollPos = $('.active-elm').next('.item-elm').scrollTop();
$('body').scrollTo(scrollPos); 
    }

不起作用：/

Answer 1

添加＆＃39; id＆＃39;属性为每个<div>。 id的值包含<div>的序列号，例如<div id="div1"> ... <div id="div2"> ...等将向上箭头括在像<a href="#divx">...</a>这样的锚中，其中x比当前div的id小1，并在类似的锚中包围向下箭头，其中x比当前div的id多一个。例如，第二个<div>如下所示：

<div id="div2">
  <a href="#div1"><img src="up-arrow.png"/></a>
  <a href="#div3"><img src="down-arrow.png"/></a>
</div>

Answer 2

好的，它适用于：

function nextScroll()
{
    /*var scrollPos = $('.active-elm').next('[data-uk-scrollspy]').scrollTop;
    $('body').scrollTo(scrollPos);*/
    var next;
      next = $(".active-elm").closest(".item-elm").next();
      $("html, body").scrollTo((next.offset().top) + 65, 300);
}

function prevScroll()
{
    var next;
      next = $(".active-elm").closest(".item-elm").prev().prev();
      $("html, body").scrollTo((next.offset().top) - 65, 300);
}

当用户点击相应的箭头时，

onclick执行每个功能

然后，当元素出现时，juste使用uikit scrollspy动态更改“active-elm”类

我认为这不是最好的方法，但它确实有效;）

Jquery滚动到具有相同类的div

2 个答案: