Javascript Jquery ScrollTop 配对元素

Question

您好，我是编程新手，请原谅我的无知。

我有几个元素，单击时使用 ScrollTop jQuery 函数滚动到指定点(在另一个引导导航选项卡中)。我有大约 20 个不同的元素，单击它们即可执行此操作。我编写了 20 个不同的函数，它们与下面的函数类似。我确信必须有一种方法来存储这些对，并有一个调用这些对的 ScrollTop 函数。

$('#element').click(function(e) {
  e.preventDefault();
  var target = $('#element2').closest('.tab-pane').attr('id');
  showTab(target);
  setTimeout(function() {
    $('html, body, nav').animate({
    scrollTop: $("#element2").offset().top -100
}, 500);
}, 500);
});

所以我的js文件有二十个左右这个函数，其中“#element”和“#element2”被“#alpha”“#alpha2”，“#beta”“#beta2”等替换...

我应该使用数组吗？一类？感谢您抽出时间。

Answer 1

<强> See Working Fiddle Here

是的，您可以将相同的类添加到您想要点击它们的所有元素，以减少代码，请参阅HTML示例:

• <span class="scrollTop" id="element">element text</span>
• <span class="scrollTop" id="alpha">alpha text</span>
• <span class="scrollTop" id="beta">beta text</span>

向 JavaScript 代码添加两条线:

JS:

var id = $(this).attr('id'); //Id of clicked item
var scrollToId = '#'+id+"2"; //Id of scrolled to item

• 然后将静态 ID 替换为动态 ID(scrollToId、id)。

完整的 JS:

$('.scrollTop').click(function(e) { 
    e.preventDefault(); 

    var id = $(this).attr('id'); //Id of clicked item
    var scrollToId = '#'+id+"2"; //Id of scrolled to item
    var target = $(scrollToId).closest('.tab-pane').attr('id');

    showTab(target);
    setTimeout(function() {
        $('html, body, nav').animate({
            scrollTop: $(scrollToId).offset().top -100
        }, 500);
    });
});