1
Что я пытаюсь сделать, это ввести кнопку в правом нижнем углу экрана, где пользователи могут щелкнуть по кнопке, чтобы перейти к следующему разделу «раздел». Как только они достигнут последнего div в html, он должен вернуться к первому section div.Прокрутите до пункта «нажимайте», перейдите в конец
Мое предложенное решение заключается в том, что когда страница изначально загружает его, он собирает массив элементов, имя класса которых является «секцией», а затем, когда пользователь нажимает кнопку, он циклически перемещает их по прокрутке страницы. Это возможно?
Вот ссылка на прокручиваемый 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);}
\t .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">↑</div>
<div class="btnScroll btnNext noselect">↓</div>
</body>
</html>
Как-то ваш jquery не относится к вашему html вообще. Вы связали событие click, чтобы связать теги, хотя у вас нет ни одного 'a'-тега на странице. – alpipego
обновил код – JokerMartini