Question

我有一个jquery脚本，可以通过单击按钮滚动到给定类的某个元素。

我已经这样做了当你点击“next”按钮时，它会滚动到第一个元素，其中“highlight”类位于一个长文本中。

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

这样简单的脚本甚至可以做到这样吗？或者我需要使用其他一些插件。

到目前为止，这是我的情况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。

欢迎任何帮助！

Answer 1

您可以添加这样的简单计数器，并使用: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事件，而不是有两个单独的方法，你可以有一个方法来完成这项工作，

所以，你的.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);
});

Test Link

Test Link 2

Test Link 3

Jquery使用上一个和下一个按钮，多个元素滚动到类

1 个答案: