第一：对不起我的英语。这不是我的母语。:)
所以，这就是问题所在：我试图使用户可以单击一个按钮，然后它会自动向下滚动到下一个DIV。每个DIV都有一个类.anchor，被“选择”的一个具有另一个类.anchor--selected。当您到达最后一个箭头时，箭头旋转到180度，因此用户可以看到箭头将一直向上。耶！这部分正在工作！
最重要的是：我不必给任何div取名字，因为我不知道会有多少个。
但是，下一部分有点棘手...我的意思是，对于那些不太适合jQuery的人。（我正在学习，慢慢来，但是我正在学习！）
现在，当我在滚动时位于页面中间时，我决定单击鼠标，它将一直向上到达页面。因此，我尝试了一些尝试，并且似乎可行。但是，当我处于最后一个锚点时，如果滚动太多，就会出现此错误Uncaught TypeError: Cannot read property 'top' of undefined(…)。
因此，这里的链接指向滚动不正常的锚按钮。
$(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>因此，我尝试在“滚动单击”上重用我的代码，并将其放在“窗口滚动”上。但是我想我缺少了一些东西，我希望得到一些帮助以解决它。
非常感谢您，随时提出问题！:)
既然你是不是测试，看看是否有是另一种.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/
注意：向上滚动时此方法不起作用，我将尝试修复该问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句