javascript - 到达 anchor 标记时如何启动功能

Question

(function start (){

  $('.bar').each(function(i){  
    var $bar = $(this);
    $(this).append('<span class="count"></span>')
    setTimeout(function(){
      $bar.css('width', $bar.attr('data-percent'));      
    }, i*100);
  });

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).parent('.bar').attr('data-percent')
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now) +'%');
        }
    });
});

}, 500)

我试图找到一种在我的页面上到达 anchor 标记时触发它的方法。所有信息都被分成一页，并且该图形功能具有动画效果。问题是它位于我页面下方的 #skills anchor 上，我希望在到达/看到该 anchor 时触发动画/功能。

有什么想法吗？ Js/JQ 新手。

感谢您的帮助。

<div class="bar cf" data-percent="100%"><span class="jacklabel"></span><span class="new_labels">SEO</span></div></div>

其余的是图表条等的 CSS。

@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}




.jackwrap {
    width: 100%;
    margin: 0 auto;
}
.bar: nth-child(3n+3) {  
  color: #ccc;
}
 .bar {
    padding-top: 5px;
    border: 1px solid white;
    background:#5b83d5;
    width: 0px;
    height: 35px;
    margin: .25em 0;
    color: #FFF;
     transition:width 2s, background .2s;
    -webkit-transform: translate3d(0,0,0);
     &:nth-of-type(2n) {
        background:lighten(#dadada , 10% );
     }

     .label {
    font-size: 0.75em;
    width: 8em;
    display: inline-block;
    z-index: 1;
    font-weight: bold;
         &.light {
        background:lighten(#3d3d3d , 10% );
     }

}
 }
 .count {
    position: absolute;
    right: 0.25em;
    top: 0.75em;
    padding: 0.15em;
    font-size: 0.75em;
    font-weight: bold;
    font-family: $fontSans;
    padding-top: 0px;
 }
.new_labels {
    padding-left: 5px;
    padding-top: 5px;
    margin-top: 5px;
}

#keep-it-left {
    text-align: left;
}

Answer 1

是这样的吗？ http://jsfiddle.net/swm53ran/127/

这只是一个通用示例，您可以将其应用于您的代码(因为我无权访问您的完整代码)

$(document).ready(function() {
    var scollH = 0;
    var aH = $('.special').position().top;
    console.log(aH);
    $(document).on('scroll', function() {
        scrollH = $(document).scrollTop();
        console.log(scrollH);
        if (scrollH > aH) {
            alert('i hit/am past the special anchor tag');
        }
    });
});

<div class="content">Other content above special anchor</div>
<a href="#" class="special">This is my Special Anchor Tag</a>

希望这对您有所帮助!