Question

我试图通过改变一堆重复的功能来遵循DRY原则，但我被困在这里。我想将此滚动更改为使用不同的类和 ids 重复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') );
});

希望你们能帮助我！

Answer 1

$('.nav > li > a').click(function(e){
    e.preventDefault();
    $('html,body').animate({
       scrollTop: $('#'+$(this).prop('class')).offset().top
    });
});

Answer 2

您也可以使用：

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

在超链接上添加“fluid Jump”类以使用动画转到该部分。（数值）

<a href="#sectionid">Go to section</a>

使用jquery scrollTop函数时出现问题

2 个答案: