我有三个部分的组件,它们都具有相同的类.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
并转到部分中的下一个锚点(#) 最佳答案
如果<a href="#panel[n]>
在DOM中按顺序排列,则可以创建所有.scrollLink
的引用集合,并使用它来确定click
事件处理程序中的下一个。
注意:如果下一个索引超过使用guard clause的对象中元素的数量,我将使处理程序短路:
if ( nextIndex == $scrollLinks.length ) { return; }
您可以轻松地将索引设置回
0
,以从头开始循环遍历它们。编辑:您提到要转到下一个锚点(大概是
scrollLink
类);我知道我不清楚您是否真的需要href
属性。页面上是否存在示例HTML中未包含的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>