单击jQuery滚动到具有相同类的下一个href
单击jQuery滚动到具有相同类的下一个href
提问于 2019-06-13 03:39:41
我有三个部分组件，它们都有相同的类.scrollLink，我想单击文本并让它基于锚点滚动到该类的下一个实例
我有一个onclick函数，当我单击它时，它只是停留在当前类
HTML：
<a href="#panel1" class="scrollLink">Test</a>
<a href="#panel2" class="scrollLink">Test</a>
<a href="#panel3" class="scrollLink">Test</a>JS：
$('.scrollLink').click(function(e) {
e.preventDefault();
var toAnchor = $(this).attr('href');
$('html,body').animate({
scrollTop: $(toAnchor).offset().top - 100
}, 'slow');
console.log($(toAnchor));
});单击.scrollLink并转到部分中的下一个锚点(#)
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-13 04:25:58
如果<a href="#panel[n]>在DOM中按顺序排列，则可以创建所有.scrollLink的引用集合，并使用它来确定click事件处理程序中的下一个事件。
注意：如果下一个索引会超过带有guard clause的对象中的元素数量，我就会缩短处理程序的路径
if ( nextIndex == $scrollLinks.length ) { return; }您可以很容易地将索引设置回0，以便再次从头开始遍历它们。
编辑：您提到的转到下一个锚点(可能使用scrollLink类)；我意识到我不清楚您是否真的需要href属性。页面上是否有样例超文本标记语言中没有包含的id="panel1"、id="panel2"和id="panel3"元素？
var $scrollLinks = $('.scrollLink');
$('.scrollLink').click(function(e) {
e.preventDefault();
var nextIndex = $scrollLinks.index(this) + 1,
toAnchor;
if (nextIndex == $scrollLinks.length) {
return;
}
toAnchor = $scrollLinks.eq(nextIndex);
$('html,body').animate({
scrollTop: toAnchor.offset().top - 100 // toAnchor is already a jQuery object in this example; it needn't be wrapped in an additional `$()` here
}, 'slow');
console.log($(toAnchor));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#panel1" class="scrollLink">Test</a>
<a href="#panel2" class="scrollLink">Test</a>
<a href="#panel3" class="scrollLink">Test</a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56569306
复制相关文章
相似问题
腾讯云开发者
