0

我试图通过更改一堆重复的函数来遵循 DRY 原则，但我被困在这里。我想将此滚动更改为使用不同的类和id重复 4 次的函数，以更通用的方式（我正在使用jQuery）：

  $('.empresa').click(function(event){
    $('html, body').animate({
        scrollTop: $("#empresa").offset().top
    }, 500);
    return false;
  });
  $('.nosotros').click(function(event){
    $('html, body').animate({
        scrollTop: $("#nosotros").offset().top
    }, 500);
    return false;
  });

这些类是 ul 中导航的元素，看起来像这样。

<ul class="nav">
    <li><a href="index#nosotros" class="nosotros">Link to the anchor</a></li>
    <li><a href="index#empresa" class="empresa">Link to the anchor</a></li>
</ul>

并且滚动到标签是带有此标签的 div 元素。

<div class="some-random-class" id="empresa" name="empresa">
<div class="some-random-class" id="nosotros" name="nosotros">

我正在使用这个新的选择器来获取具有正确锚点的列表类，但是我在函数的滚动部分遇到问题，我不知道使用/转换提取的对象的类或名称id 所以我可以像以前一样继续使用它。

$('.nav li').children('a').click(function() {
    alert( $(this).attr('class') );
});

希望你们能帮助我！

4

2 回答 2

2 
$('.nav > li > a').click(function(e){
    e.preventDefault();
    $('html,body').animate({
       scrollTop: $('#'+$(this).prop('class')).offset().top
    });
});
于 2013-07-06T19:26:32.590 回答
0

您还可以使用：

$('.fluidJump').on('click', function(event) {
    event.preventDefault();
    var offset = $($(this).attr('href')).offset().top;
    $('html, body').animate({scrollTop:offset}, 500);
});

在 hiperlink 上添加“fluidJump”类以转到带有动画的部分。（数值）

<a href="#sectionid">Go to section</a>
于 2013-07-06T19:46:27.847 回答