Establecer el ancla como activo con jQuery

Tengo una pregunta corta. ¡Tengo 3 cuadros de contenido y todos tienen un menú con enlaces de anclaje a los cuadros de contenido a continuación! cuando visito el sitio, el primer anclaje se establece si está activo … cuando hago clic ahora en el número 2 en el título 1, salta al segundo ancla … pero el problema es que tengo que desplazarme un poco más arriba con la rueda del ratón para establecer El 2º ancla como activo.

y al revés también. cuando hago clic en box3 en anchor1 ..

¿Alguna idea para resolver el problema?

¡CUANDO EL DESPLAZAMIENTO HACIA ARRIBA Y HACIA ABAJO FUNCIONA PERFECTO! SOLO EL SALTO SOBRE EL ANCLAJE PROBLEMAS HECHOS

Aquí está la demostración: http://jsfiddle.net/wv9EQ/

Aquí está el código javascript:

$(function(){ var sections = {}, _height = $(window).height(), i = 0; //// Grab positions of our sections $('.section').each(function(){ sections[this.name] = $(this).offset().top; }); $(document).scroll(function(){ var $this = $(this), pos = $this.scrollTop(); for(i in sections){ if(sections[i] > pos && sections[i] < pos + _height){ $('a').removeClass('active'); $('.nav_' + i).addClass('active'); } } }); }); 

EDITAR: no puedo agregar activo a todos los enlaces! Incluyo este pequeño navegador como PHP y su dinámica para todas las cajas! cuando configuro todo en activo que todos los anclajes están activos: D

Simplemente haga lo mismo cuando haga clic en un enlace:

 $('.head-nav-button').click(function() { $('a').removeClass('active'); $('.nav_' + $(this).attr('href').replace('#', '')).addClass('active'); }); 

http://jsfiddle.net/wv9EQ/7/

para su código use la manera simple

http://jsfiddle.net/wv9EQ/4/

  
  • 2. SP.
  • Quita esto

     for(i in sections){ if(sections[i] > pos && sections[i] < pos + _height){ $('a').removeClass('active'); $('.nav_' + i).addClass('active'); } } 

    Y simplemente agregue la clase "activa" donde la necesite, como aquí http://jsfiddle.net/wv9EQ/6/