情况

Question

首先：我提前抱歉我的英语。这不是我的第一语言。：）

情况

所以，这就是交易：我试图制作一个用户可以点击的按钮，然后它会自动向下滚动到下一个DIV。每个DIV都有.anchor类，以及选择＆＃34;＆＃34;有另一个名为.anchor--selected的班级。当你到达最后一个时，箭头旋转到180度，这样用户就可以看到它会一直向上。好极了！这部分工作正常！

最重要的是：我不必给我的任何一个名字，因为我不知道会有多少名字。

但是，下一部分它有点棘手......我的意思是，对于那些没有使用jQuery工作的人。（我慢慢地学习，但我正在学习！）

问题

现在，当我在滚动页面中间而我决定点击时，它会一直向上移动到页面。所以，我尝试了一些东西，它似乎工作。但是当我在最后一个锚点中，并且滚动太多时，它会给我这个错误Uncaught TypeError: Cannot read property 'top' of undefined(…)。

CodePen

所以这里link到不那么有效的锚点按钮滚动。

＆＃13;

    $(document).ready(function(){
    	$(".scroll-down-arrow").on("click", function(e) {
    		e.preventDefault();
    		var currentAnchor = $(".anchor--selected");;
    		var nextAnchor = currentAnchor.next(".anchor");
    		var firstAnchor = $(".anchor").first();
    		var lastAnchor = $(".anchor").last();
    
    		if(currentAnchor.is(lastAnchor)) {
    			currentAnchor.removeClass("anchor--selected");
    			firstAnchor.addClass("anchor--selected");
    		   
    			$('html, body').stop().animate({scrollTop:firstAnchor.offset().top});
    			$(this).removeClass("prev").addClass("next");
    		} else {
    			currentAnchor.removeClass("anchor--selected");
    			nextAnchor.addClass("anchor--selected");
    			$('html, body').stop().animate({scrollTop:nextAnchor.offset().top});
    
    			if(currentAnchor.is(lastAnchor.prev())) {
    				$(this).removeClass("next").addClass("prev");
    			}
    		}
    	});
    
    	$(window).on("scroll", function() {
    		var scrollPos = $(window).scrollTop();
    		var currentAnchor = $(".anchor--selected");;
    		var nextAnchor = currentAnchor.next(".anchor");
    		var prevAnchor = currentAnchor.prev(".anchor");
    		var firstAnchor = $(".anchor").first();
    		var lastAnchor = $(".anchor").last();
    
    		console.log("scrollPos : " + scrollPos + " currentAnchor : " + nextAnchor.offset().top);
    		console.log(scrollPos <= nextAnchor.offset().top);
    		console.log("Current anchor is last? : " + currentAnchor.is(lastAnchor));
    
    		if(scrollPos >= nextAnchor.offset().top) {
    			if(currentAnchor.is(lastAnchor)) {
    				currentAnchor.removeClass("anchor--selected");
    				prevAnchor.addClass("anchor--selected");
    			
    				$(".scroll-down-arrow").removeClass("prev").addClass("next");
    			} else {
    				currentAnchor.removeClass("anchor--selected");
    				nextAnchor.addClass("anchor--selected");
    
    				if(currentAnchor.is(firstAnchor)) {
    					$(".scroll-down-arrow").removeClass("next").addClass("prev");
    				}
    			}
    		}
    	});
    });

＆＃13;

  
    #one, #two, #three, #four, #five {
    	padding: 15px;
    }
  
    #one {
    	height: 500px;
    	background-color: #f0f8ff;
    }
    
    #two {
    	height: 300px;
    	background-color: #7fffd4;
    }
    
    #three {
    	height: 150px;
    	background-color: #deb887;
    }
    
    #four {
    	height: 600px;
    	background-color: #5f9ea0;
    }
    
    #five {
    	height: 1000px;
    	background-color: #f3b9c6;
    }
    
    .scroll-down-arrow {
    	width: 50px;
    	height: 50px;
    	border-radius: 50%;
    	background-color: #010101;
    	position: fixed;
    	bottom: 25px;
    	right: 25px;
    	cursor: pointer;
    	-webkit-transition: all 250ms ease-in-out;
    	-moz-transition: all 250ms ease-in-out;
    	-o-transition: all 250ms ease-in-out;
    	transition: all 250ms ease-in-out;
    }
    
    .scroll-down-arrow.prev {
    	-webkit-transform: rotate(180deg);
    	-ms-transform: rotate(180deg);
    	-o-transform: rotate(180deg);
    	transform: rotate(180deg);
    }
    
    .scroll-down-arrow.next {
    	-webkit-transform: rotate(0deg);
    	-ms-transform: rotate(0deg);
    	-o-transform: rotate(0deg);
    	transform: rotate(0deg);
    }
    
    .scroll-down-arrow i {
    	color: #f1f1f1;
    	font-size: 24px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	-webkit-transform: translate(-50%, -50%);
    	-moz-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
    	-o-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
    	<div id="one" class="anchor anchor--selected">
    		This is my first div
        </div>
    
    	<div id="two" class="anchor">
    		This is my second div
    	</div>
    
    	<div id="three" class="anchor">
    		This is my third div
    	</div>
    
    	<div id="four" class="anchor">
    		This is my fourth div
    	</div>
    
    	<div id="five" class="anchor">
    		This is my fifth div
    	</div>
    
    	<div class="scroll-down-arrow next"><i class="fa fa-arrow-down" aria-hidden="true"></i></div>
    </main>

＆＃13;

结论

所以，我试图在＆＃34;滚动点击＆＃34;上重复使用我的代码。并将其放在＆＃34;窗口滚动＆＃34;。但我认为我错过了一些东西，我希望得到一些帮助来解决这个问题。

非常感谢您，随时提出问题！：）

Answer 1

由于您没有测试是否另一个.anchor，jQuery会抛出错误。只需测试是否有下一个.anchor。

<强> JQUERY

$(document).ready(function(){
        $(".scroll-down-arrow").on("click", function(e) {
            e.preventDefault();
            var currentAnchor = $(".anchor--selected");;
            var nextAnchor = currentAnchor.next(".anchor");
            var firstAnchor = $(".anchor").first();
            var lastAnchor = $(".anchor").last();

            if(currentAnchor.is(lastAnchor)) {
                currentAnchor.removeClass("anchor--selected");
                firstAnchor.addClass("anchor--selected");

                $('html, body').stop().animate({scrollTop:firstAnchor.offset().top});
                $(this).removeClass("prev").addClass("next");
            } else {
                currentAnchor.removeClass("anchor--selected");
                nextAnchor.addClass("anchor--selected");
                $('html, body').stop().animate({scrollTop:nextAnchor.offset().top});

                if(currentAnchor.is(lastAnchor.prev())) {
                    $(this).removeClass("next").addClass("prev");
                }
            }
        });

        $(window).on("scroll", function() {
            var scrollPos = $(window).scrollTop();
            var currentAnchor = $(".anchor--selected");
        if(currentAnchor.next(".anchor").length){
          var nextAnchor = currentAnchor.next(".anchor");
        } else {
          var nextAnchor = $(".anchor:first");
        }
            var prevAnchor = currentAnchor.prev(".anchor");
            var firstAnchor = $(".anchor").first();
            var lastAnchor = $(".anchor").last();

            console.log("scrollPos : " + scrollPos + " currentAnchor : " + nextAnchor.offset().top);
            console.log(scrollPos <= nextAnchor.offset().top);
            console.log("Current anchor is last? : " + currentAnchor.is(lastAnchor));

            if(scrollPos >= nextAnchor.offset().top) {
                if(currentAnchor.is(lastAnchor)) {
                    currentAnchor.removeClass("anchor--selected");
                    prevAnchor.addClass("anchor--selected");

                    $(".scroll-down-arrow").removeClass("prev").addClass("next");
                } else {
                    currentAnchor.removeClass("anchor--selected");
                    nextAnchor.addClass("anchor--selected");

                    if(currentAnchor.is(firstAnchor)) {
                        $(".scroll-down-arrow").removeClass("next").addClass("prev");
                    }
                }
            }
        });
    });

小提琴： https://jsfiddle.net/yak613/up6rLqou/

注意：滚动时不起作用，我会尝试修复它。

使用Anchors，Class和jQuery滚动

情况

问题

CodePen

结论

1 个答案: