Question

这是我的html结构。每个li都有height:100vh;

<button class="giu"></button>
<ul>
  <li class="product" id="product1"></li>
  <li class="product" id="product2"></li>
  <li class="product" id="product3"></li>
  <li class="product" id="product4"></li>
</ul>

当我点击按钮时，我希望页面向下滚动到下一个li

我发现了这个jquery代码（由用户Vohuman提供），但它只是第一次运行。

$('.giu').click(function(event) {
    // Preventing default action of the event
    event.preventDefault();
    // Getting the height of the document
    var n = $(window).height();
    $('html, body').animate({ scrollTop: n }, 1000);
//                                       |    |
//                                       |    --- duration (milliseconds) 
//                                       ---- distance from the top
});

我不是javascript / jquery专家，你能解释一下为什么会出错吗？

Answer 1

将ScrollTop与 offset（）。top 一起使用，将其滚动到LI节点。

<强> HTML

添加＆＃34;有效＆＃34;要在页面加载时首先显示的LI项目上的类。对我来说，它是第一个LI项目。

<button class="giu">Animate To Next avaiable List Item</button>
<ul>
  <li class="product active" id="product1">1</li>
  <li class="product" id="product2">2</li>
  <li class="product" id="product3">3</li>
  <li class="product" id="product4">4</li>
</ul>

<强>的JavaScript

$('.giu').click(function(event) {
    event.preventDefault();
    var n = $(window).height();
    $('li.active').removeClass('active').next('li').addClass('active');
    $('body').animate({
        scrollTop: $(".product.active").offset().top
    }, 500);
});

小提琴 - http://jsfiddle.net/ylokesh/fhg1g974/

Answer 2

你需要全局变量来指出当前视图的内容并跳转到下一个是你可以或者返回开头例如：

HTML

<button onclick="makeClick()" />

<ul>
  <li class="product" id="product1"></li>
  <li class="product" id="product2"></li>
  <li class="product" id="product3"></li>
  <li class="product" id="product4"></li>
</ul>

JS

var currentLocation = 'product1'
function makeClick()
{
  if(currentLocation  == 'product1')
  {
    //go to next element
    currentLocation = 'product2';
  }
  else if(currentLocation  == 'product2')
  {
     //go to the first element if reach to end
     currentLocation = 'product1'
  }

   $("html,body").animate({
        scrollTop: $("#" + currentLocation).offset().top
    }, 1000);
}

Answer 3

首先，你离你正在寻找的答案并不遥远，但与此同时你却错过了最关键的部分。要使用按钮实现可滚动操作，必须执行以下操作：

捕获无序列表中第一个元素的顶部位置。
为整个文档（html或正文）设置动画，将其顶部位置移动到您正在使用的当前无序列表元素，启动将是第一个。
计算您要经历的元素数量，这样当您点击列表中的最后一个元素时，您的计数器就会充当系统的标志，以指示下一个要引用的元素。
为胜利增加了功能（完全可选......为什么不呢）！让我们这样做，以便当您点击最后一个元素时，单击该按钮将带您返回列表。我希望它能激发你在不同的实现中使用它。

HTML

<button class="giu">Click to go to next</button>
<ul class="products">
    <li class="product" id="product1"></li>
    <li class="product" id="product2"></li>
    <li class="product" id="product3"></li>
    <li class="product" id="product4"></li>
</ul>

CSS，我添加了这个，所以当你看到下面的jsFiddle时，它非常清晰。它也与我使用的jQuery实现相关。如果您对CSS在此处的帮助方式感到困惑，请务必查看n-th child selectors。

.product {
    height: 100vh;
}
ul :nth-child(1) {
    background-color: blue;
}
ul :nth-child(2) {
    background-color: red;
}
ul :nth-child(3) {
    background-color: green;
}
ul :nth-child(4) {
    background-color: yellow;
}

的jQuery

$(document).ready(function(){
    // grabbing the total number of list elements (product) under the unordered list (products)
    var count_li = $('.products .product').length;
    // of course, let's make sure we have any elements before we do anything
    if(count_li){
        // counts the current element we are looking at, beginning with the first (1) one.
        var count = 1;
        $('.giu').click(function(event) {
            // we want to animate the whole document to move
            $("html, body").animate({
                // we are moving the document to the 'top' of the desired element, in this case the n-th list element
                scrollTop: $(".products :nth-child(" + count + ")").offset().top + "px"
            }, 500); // a 0.5 sec delay for visual smoothness
            ++count;
            // this here is 'extra' because I thought it would be nice to loop back to the beginning, giving the button an endless functionality.
            if(count > count_li){
                count = 1;
            }
        });
    }
});

以下是一个实例：jsFiddle

享受！如果您还需要其他任何内容，请随时发表评论。

每次单击按钮调用功能

3 个答案: