单击时滚动到 div，最后循环答案

【问题标题】：Scroll to div on click, loop around at end单击时滚动到 div，最后循环
【发布时间】：2015-09-24 05:36:21
【问题描述】：

我要做的是在屏幕右下角引入一个按钮，用户可以单击该按钮滚动到下一个“部分”div。一旦他们到达 html 中的最后一个 div，它应该循环回到第一个 section div。

我提出的解决方案是，当页面最初加载时，它会收集一个类名为“section”的项目数组，然后当用户点击按钮时，它会在它们之间循环滚动页面。这可能吗？

这是我尝试使用的滚动 JavaScript 的链接。

HTML

<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>

<script>
$(document).ready(function(){
    $('.btnPrev').click(function() {
       var target;
       $(".section").each(function(i, element) {
         target = $(element).offset().top - 20;
         if (target - 40 > $(document).scrollTop()) {
           return false; // break
         }
       });
       $("html, body").animate({scrollTop: target}, 700);
    });
    $('.btnNext').click(function() {
       var target;
       $(".section").each(function(i, element) {
         target = $(element).offset().top - 20;
         if (target - 40 > $(document).scrollTop()) {
           return false; // break
         }
       });
       $("html, body").animate({scrollTop: target}, 700);
    });
});
</script>

<style type="text/css">
    html {background-color: rgb(40,40,40);}
	.section {background-color:lightblue;margin: 40px 100px; padding:20px; height:300px;}
    .rowA {background-color:lightgreen;}

    /*Scroll Buttons*/
    .btnScroll {position: fixed; background-color: rgba(0,0,0,.5); width:40px; height:40px; text-align:center; line-height:40px; color:white; border-radius:4px;}
    .btnScroll:hover {background-color: rgba(255,255,255,.2); cursor:pointer;}
    .btnScroll:active {background-color: rgba(255,255,255,.5); cursor:pointer; selection:none;}
    .btnPrev {bottom: 70px; right: 20px;}
    .btnNext {bottom: 20px; right: 20px;}
    .noselect {
        -webkit-touch-callout: none; 
        -webkit-user-select: none; 
        -khtml-user-select: none; 
        -moz-user-select: none; 
        -ms-user-select: none;
        user-select: none;
    }
</style>


<script src="rats.js"></script>

<div class="section rowA">Content Here</div>
<div class="section rowB">Content Here</div>
<div class="section rowA">Content Here</div>
<div class="section rowB">Content Here</div>
<div class="section rowA">Content Here</div>
<div class="section rowB">Content Here</div>
<div class="section rowA">Content Here</div>

<div class="btnScroll btnPrev noselect">&#8593;</div>
<div class="btnScroll btnNext noselect">&#8595;</div>

</body>
</html>

【问题讨论】：

不知何故，您的 jquery 根本与您的 html 无关。尽管页面上没有单个 a-tag，但您将点击事件附加到链接标签。

标签： jquery html css

【解决方案1】：

我采取了稍微不同的方法来回答您的问题。我将代码更改为：

1) 使用.selected 类初始化第一个元素。

2) 在页面点击时，将.selected 类向上或向下移动指定元素。

3) 将类移动到新选择的元素后，滚动到该元素（类为.selected 的元素）。

这里是结果的小提琴：

http://jsfiddle.net/rt13qnmm/

我们现在正在做的是管理.selected 类的位置并根据它的新位置滚动。

所有动画都是使用自定义函数scrollToSelected(offset)完成的

// Perform animation to the '.selected' class
function scrollToSelected(offset){
    $('html,body').stop(true).animate({
        scrollTop:$('.selected').offset().top + offset
    }, 'slow');
}

（这可以通过删除硬编码的.selected jQuery 选择器并将其作为参数传递给函数来进一步解耦，从而允许您滚动到整个站点的任何元素）

【讨论】：

【解决方案2】：

我稍微简化了您的代码，并提出了一个解决方案，该解决方案使用索引变量来跟踪用户当前所在的部分。向上和向下箭头现在都在起作用，并且当用户到达第一个或最后一个 .section 元素时它也会环绕。

请试试箭头按钮，告诉我你的想法。

现场演示：

var curr_el_index = 0;
var els_length = $(".section").length;

$('.btnNext').click(function () {
    curr_el_index++;
    if (curr_el_index >= els_length) curr_el_index = 0;
    $("html, body").animate({
        scrollTop: $(".section").eq(curr_el_index).offset().top - 20
    }, 700);
});

$('.btnPrev').click(function () {
    curr_el_index--;
    if (curr_el_index < 0) curr_el_index = els_length - 1;
    $("html, body").animate({
        scrollTop: $(".section").eq(curr_el_index).offset().top - 20
    }, 700);
});

html {
     background-color: rgb(40, 40, 40);
 }
 .section {
     background-color:lightblue;
     margin: 40px 100px;
     padding:20px;
     height:300px;
 }
 .rowA {
     background-color:lightgreen;
 }
 /*Scroll Buttons*/
 .btnScroll {
     position: fixed;
     background-color: rgba(0, 0, 0, .5);
     width:40px;
     height:40px;
     text-align:center;
     line-height:40px;
     color:white;
     border-radius:4px;
 }
 .btnScroll:hover {
     background-color: rgba(255, 255, 255, .2);
     cursor:pointer;
 }
 .btnScroll:active {
     background-color: rgba(255, 255, 255, .5);
     cursor:pointer;
     selection:none;
 }
 .btnPrev {
     bottom: 70px;
     right: 20px;
 }
 .btnNext {
     bottom: 20px;
     right: 20px;
 }
 .noselect {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section rowA">Content Here</div>
<div class="section rowB">Content Here</div>
<div class="section rowA">Content Here</div>
<div class="section rowB">Content Here</div>
<div class="section rowA">Content Here</div>
<div class="section rowB">Content Here</div>
<div class="section rowA">Content Here</div>
<div class="btnScroll btnPrev noselect">&#8593;</div>
<div class="btnScroll btnNext noselect">&#8595;</div>

JSFiddle 版本：https://jsfiddle.net/9x335kzg/3/

【讨论】：