点击时滚动到div，结束循环 [英] Scroll to div on click, loop around at end

查看：112
本文介绍了点击时滚动到div，结束循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要做的是在屏幕的右下角引入一个按钮，用户可以点击按钮滚动到下一个部分div。一旦他们到达HTML中的最后一个div，它应该循环回到第一个部分 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（）{ （目标 - 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;填充：20像素; height：300px;} .rowA {background-color：lightgreen;} / * Scroll Buttons * / .btnScroll {position：fixed; background-color：rgba（0,0,0，.5）;宽度：40像素;高度：40像素;文本对齐：中心;行高：40像素;白颜色; border-radius：4px;} .btnScroll：hover {background-color：rgba（255,255,255，.2）; cursor：pointer;} .btnScroll：active {background-color：rgba（255,255,255，.5）;光标：指针; 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;用户选择：无; }< / 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 < 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>

解决方案

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



请试用箭头按钮并告诉我您的想法。

现场演示： 

 

  html {background-color：rgb（40，40，40）; } .section {background-color：lightblue; margin：40px 100px;填充：20像素;高度：300像素; } .rowA {background-color：lightgreen; } / *滚动按钮* / .btnScroll {position：fixed; background-color：rgba（0，0，0，.5）;宽度：40像素;高度：40像素;文本对齐：中心;行高：40像素;白颜色;边界半径：4PX; } .btnScroll：hover {background-color：rgba（255，255，255，.2）;光标：指针; } .btnScroll：active {background-color：rgba（255,255,255，.5）;光标：指针;选择：无; } .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;用户选择：无; }  

 < 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>  
 $ b 
 JSFiddle版本： https://jsfiddle.net/9x335kzg/3/   
What I'm trying to do is introduce a button at the bottom right corner of the screen where users can click the button to scroll to the next 'section' div. Once they reach the last div in the html, it should loop back to the first section div. 



My proposed solution is, when the page initially loads it gathers an array of items who's class name is 'section', then as the user hits the button it cycles through them scrolling the page. Is this possible?



Here is a link to the scrolling JavaScript I was trying to use.



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>






 解决方案 
I simplified your code a bit and came up with a solution that uses an index variable to keep track of the section the user is currently on. Both the up and down arrows are working now, and it also wraps around when the user reaches the first or last .section element.



Please try out the arrow buttons and tell me what you think.



Live Demo:







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 Version: https://jsfiddle.net/9x335kzg/3/


                        
这篇关于点击时滚动到div，结束循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆