Question

我要做的是在屏幕右下角引入一个按钮，用户可以点击按钮滚动到下一个“部分”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>

Answer 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选择器并将其作为参数传递给函数，可以进一步解耦，允许您滚动到整个站点中的任何元素）

Answer 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/

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

2 个答案: