javascript - Javascript Jquery ScrollTop配对元素

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

我有几个元素，当单击它们时，使用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文件中有20个左右的此函数，其中“ #element”和“＃element2”被“ #alpha”，“＃alpha2”，“＃beta”，“＃beta2”等替换为...

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

最佳答案

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>


将两个lignes添加到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);
    });
});