2

我有一个 jquery 脚本，它在单击按钮时滚动到具有给定类的某个元素。

我已经做到了，所以当您单击“下一步”按钮时，它会滚动到第一个具有“突出显示”类的元素，该元素位于长文本中。

我真正需要的是设置或升级该脚本，以便您可以在单击“上一个”和“下一个”按钮时使用相同的类从一个元素导航到另一个元素。到目前为止，我有这个脚本，它只滚动到具有给定类的第一个元素以及上一个和下一个按钮，从中只有下一个按钮可以使用。

用这么简单的脚本就能做出这样的事情吗？或者我需要使用其他插件。

这是我到目前为止的情况 Fiddle。

在 html 中有很多文本，您可以在 jsfiddle 的链接上查看它...这里我将其替换为“...”：

<div class="navigation">
   <a href="#" id="prev">Previous</a>
   <br>
   <a href="#" id="next">Next</a>
</div>
<div class="demo-container">
   <p>
      ...
      <span class="highlight">ipsum</span> 
      ...
      <span class="highlight">Duis</span> 
      ...
      <span class="highlight">convallis</span> 
      ...
      <span class="highlight">blandit</span>
      ...
      <span class="highlight">Sed</span>
      ....
   </p>
</div>

脚本：

/**  scroll to element function **/
function scrollToElement(selector, time, verticalOffset) {
    time = typeof (time) != 'undefined' ? time : 500;
    verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);
}

/**document ready**/
$(document).ready(function () {

    /* scroll to -150px before .highlight with animation time of 1000ms */
    $('#next').click(function (e) {
        e.preventDefault();
        scrollToElement('.highlight', 1000, -150);
    });
});

CSS：

.highlight{
  background-color:red;
}

.navigation{
     position:fixed;
     background: #FFFFFF;
     padding:5px;
     border: 1px solid;
}

你可以自由编辑我的 jsfiddle。

欢迎任何帮助！

4

1 回答 1

6

您可以像这样添加一个简单的计数器，并使用:nth-child选择器

var count = 0;
$('#next').click(function (e) {
    count++;
    e.preventDefault();
    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
});

更新：

为了增加一些活力，（因为你不知道会有多少.highlight元素）..你可以做这样的事情，

count = 0;
var max_length = $('.highlight').length;

$('#next').click(function (e) {
    e.preventDefault();
    if (count < max_length) {
        count++;
    } 
    else {
        count = 1;
        alert("reached start point");
    }

    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
    .
    .
    .

更新：

好吧，在这种情况下，我会告诉你以不同的方式处理点击事件，而不是使用两种单独的方法，你可以使用一种方法来完成这项工作，

所以，你.click()看起来像，

$('.navigation a').click(function (e) {
    e.preventDefault();
    var id = $(this).prop('id');
    if(id === "next"){
         if (count < max_length) {
            count++;
         } else {
            count = 1;
            alert("reached start point");
         }
    }
    else{
         if (count > 1) {
            count--;
         } else {
            count = max_length;
            alert("reached start point");
         }            
    }
    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
});

测试链接

测试链接 2

测试链接 3

于 2013-06-17T08:32:09.643 回答