滚动到下一个和上一个ID
[英]Scroll to next and prev ID
问题描述
我有许多具有不同内容的部分，还有一个链接（上一个和下一个）可以转到下一部分。
这工作正常，但是当我在中间添加新部分时，我必须更改所有id，因此next和prev按钮仍然可以正常工作。
让我们看这个例子：
<section id="uno" class="portfolio-item">
<div>my content</div>
<a class="next" href="#dos">Next</a>
</section>
<section id="dos" class="portfolio-item">
<div>my content</div>
<a class="back" href="#uno">Back</a>
<a class="next" href="#tres">Next</a>
</section>
<section id="tres" class="portfolio-item">
<div>my content</div>
<a class="back" href="#dos">Back</a>
<a class="next" href="#cuatro">Next</a>
</section>
考虑到我不想手动执行此操作，因为我通常会添加内容，而并非总是在结尾处添加内容，因此我需要知道如何使用jQuery自动执行此操作。
因此，我不想将id添加到每个部分，而将#link手动添加到next / prev部分。
如何自动执行此操作？ 检测下一部分，然后单击下一步按钮，而无需添加每个部分的名称（在链接和该部分中）。
用解决方案编辑：
$(document).ready(function() {
$(".next-new").attr("href", function(){
return "#"+$(this).parents("section").next("section").attr("id");
});
});
2 个解决方案
解决方案1
1 已采纳 2018-09-04 19:39:33
这可能有助于滚动下一个和上一个动态创建的部分
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".next").click(function(){
$('html, body').animate({
scrollTop: $(this).parent().next().offset().top
}, 2000);
});
$(".back").click(function(){
$('html, body').animate({
scrollTop: $(this).parent().prev().offset().top
}, 2000);
});
});
</script>
</head>
<body>
<section id="uno" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="next">Next</a>
</section>
<section id="dos" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>
<section id="tres" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>
<section id="tres" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>
<section id="tres" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>
</body>
</html>
解决方案2
1 2018-09-04 19:41:22
您可以尝试删除硬编码的部分ID，并动态添加它，并与每个部分的上一个和下一个按钮href ：
$("section").each(function(i) { $(this).attr("id", i) //Back button var backButton = $(this).children().get(1); if (backButton.innerHTML == "Next") { $(backButton).attr("href", "#" + (i + 1)) console.log(`Section id ${i} next element is ${(i + 1)} =>`, $(this).children().get(1)) } else { $(backButton).attr("href", "#" + (i - 1)) console.log(`Section id ${i} back element is ${(i - 1)} =>`, $(this).children().get(1)) } var nextButton = $(this).children().get(2); if (nextButton) { $(nextButton).attr("href", "#" + (i + 1)) console.log(`Section id ${i} next element is ${(i + 1)} =>`, $(this).children().get(2)) } })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="portfolio-item"> <div>my content 1 </div> <a class="next" href="#dos">Next</a> </section> <section class="portfolio-item"> <div>my content 2</div> <a class="back" href="#uno">Back</a> <a class="next" href="#tres">Next</a> </section> <section class="portfolio-item"> <div>my content 3</div> <a class="back" href="#dos">Back</a> <a class="next" href="#cuatro">Next</a> </section>
使用Bootstrap ScrollSpy滚动到NEXT / PREV按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.