Question

有没有办法通过单击锚点来向任何正在滚动的div添加一个类？

我目前拥有此代码，但只能添加＆＃34;动画摇摆＆＃34;类到#ecomm div ..

理想情况下，我点击的页面上的任何锚点我不仅要向下滚动它，还要添加动画类..

到目前为止我的代码：

<script>
$('a[href=#ecomm]').click(function(){
  $("#ecomm").addClass( "animated swing" );
    $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
     }, 500);
     return false;
  });
</script>

Answer 1

适用于所有# hrefs的锚标记。

<script>
    $('a[href^=#]').click(function () { // Use all anchor tags with an href that starts with #
        var href = $(this).attr('href'); // Get the href for the clicked anchor.
        $(href).addClass( "animated swing" ); // The href is the same as the id.
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 500);
        return false;
    });
</script>

考虑到@ rorypicko的评论，可以添加一个数据属性，以确保只有# hrefs才能使用此功能：

<a href="#ecomm" data-scroll-link>Text</a>
<script>
    $('a[href^=#][data-scroll-link]').click(function () { // Use all anchor tags with an href that starts with # and the specified data attribute.
        var href = $(this).attr('href'); // Get the href for the clicked anchor.
        $(href).addClass( "animated swing" ); // The href is the same as the id.
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 500);
        return false;
    });
</script>

Answer 2

这样的事情：

<script>
    var href
    $('a').click(function(){
        href = this.attr('href');
        $('div').each(function(){
            var thisDiv = this
            if(this.attr('id') == href)
            {
                thisDiv.addClass( "animated swing" );
            }
            $('html, body').animate({
                scrollTop: thisDiv.offset().top
            }, 500);
        });
        return false;
     });
</script>

希望这有效。

单击锚标记时添加效果

2 个答案: