javascript - 使用 anchor 、类和 jQuery 滚动

Question

首先:我提前为我的英语感到抱歉。这不是我的母语。 :)

情况

所以，这是交易:我正在尝试制作一个用户可以单击的按钮，然后它会自动向下滚动到下一个 DIV。每个 DIV 都有 .anchor 类，而被“选中”的 DIV 有另一个名为 .anchor--selected 的类。当您到达最后一个时，箭头会旋转 180 度，因此用户可以看到它一直向上。耶!这部分工作!

最重要的是:我不必为我的任何 div 命名，因为我不知道会有多少。

但是，下一部分有点棘手……我的意思是，对于那些不经常使用 jQuery 的人来说。 (我正在学习，慢慢地，但我正在学习!)

问题

现在，当我在页面中间滚动时，我决定点击，它会一直滚动到页面。所以，我尝试了一些东西，它似乎有效。但是当我在最后一个 anchor 时，我滚动太多，它给了我这个错误 Uncaught TypeError: Cannot read property 'top' of undefined(...)。

CodePen

所以这里是 link滚动到不太工作的 anchor 按钮。

    $(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");
    				}
    			}
    		}
    	});
    });

  
    #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%);;
    }

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

结论

因此，我尝试在“滚动点击”上重用我的代码并将其放在“窗口滚动”上。但我想我遗漏了一些东西，我需要一些帮助来完成它。

非常感谢，欢迎随时提问! :)

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");
                    }
                }
            }
        });
    });

fiddle : https://jsfiddle.net/yak613/up6rLqou/

注意:这在向上滚动时不起作用，我会尝试解决这个问题。