jQuery desplazamiento para anclar (cantidad de ajuste menos de píxeles)

Question

estoy usando el siguiente código para desplazarse a puntos de anclaje con jQuery:

$(document).ready(function() { 
    function filterPath(string) { 
    return string 
    .replace(/^\//,'') 
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
    .replace(/\/$/,''); 
    } 
    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 

    $('a[href*=#]').each(function() { 
    var thisPath = filterPath(this.pathname) || locationPath; 
    if ( locationPath == thisPath 
    && (location.hostname == this.hostname || !this.hostname) 
    && this.hash.replace(/#/,'')) { 
     var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top; 
     $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
      location.hash = target; 
      }); 
     }); 
     } 
    } 
    }); 

    // use the first element that is "scrollable" 
    function scrollableElement(els) { 
    for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
     var el = arguments[i], 
      $scrollElement = $(el); 
     if ($scrollElement.scrollTop()> 0) { 
     return el; 
     } else { 
     $scrollElement.scrollTop(1); 
     var isScrollable = $scrollElement.scrollTop()> 0; 
     $scrollElement.scrollTop(0); 
     if (isScrollable) { 
      return el; 
     } 
     } 
    } 
    return []; 
    } 

}); 

¿Hay alguna forma para que sea desplazarse a ese anclaje, pero menos de una cantidad fija de píxeles? (en mi caso quiero que vaya -92px)

Gracias por cualquier ayuda.

Answer 1

Solo tuve que resolver este problema yo mismo. Necesita ajustar su desplazamiento por la cantidad de píxeles que desea desplazar a. En mi caso, necesitaba que fuera 50 píxeles más alto en la página. Entonces, resté 50 de targetOffset.

Ahora, la parte del código que te hace temblar es location.hash: indica al navegador que establezca su ubicación en un punto específico. En todos los casos, esta es una cadena que contiene la ID a la que acaba de desplazarse. Entonces, sería algo así como '#foo'. Necesitas mantener esto, así que lo dejamos.

Sin embargo, para evitar que el navegador 'salte' cuando se establece location.hash (una acción predeterminada del navegador), simplemente necesita evitar la acción predeterminada. Por lo tanto, pase su evento 'e' a través de la función de finalización en la función animada. Luego simplemente llame a e.preventDefault(). Deberás asegurarte de que el navegador está llamando a un evento, de lo contrario se producirá un error. Entonces, una prueba if corrige eso.

Listo. Aquí está el trozo de código revisado:

if (target) { 
    var targetOffset = $target.offset().top - 50; 
    $(this).click(function(event) { 
     if(event != 'undefined') { 
      event.preventDefault();} 
     $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) { 
      e.preventDefault(); 
      location.hash = target; 
     }); 
    }); 
    } 

Answer 2

Esto es lo que yo uso:

function scrollToDiv(element){ 
    element = element.replace("link", ""); 
    $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow'); 
}; 

... donde 50 es el número de píxeles para agregar/restar.

Answer 3

No pude usar la solución de Jonathan Savage ya que no pude pasar una devolución de llamada de evento a animate() sin error. Tenía este problema hoy y encontré una solución sencilla:

 var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top - 92; 
     $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
      location.hash = targetOffset; 
      }); 
     }); 

Reste su desplazamiento desde la variable targetOffset píxeles, a continuación, asignar location.hash a esa variable. Detiene el salto de página al desplazarse al hash de destino.

Answer 4

Lol)

<span class="anchor" id="section1"></span> 
 
<div class="section"></div> 
 

 
<span class="anchor" id="section2"></span> 
 
<div class="section"></div> 
 

 
<span class="anchor" id="section3"></span> 
 
<div class="section"></div> 
 

 
<style> 
 
.anchor{ 
 
    display: block; 
 
    height: 115px; /*same height as header*/ 
 
    margin-top: -115px; /*same height as header*/ 
 
    visibility: hidden; 
 
} 
 
</style>

Answer 5

Este código de trabajo para mí en cualquier ancla enlace en mi sitio de respeto "150px" de altura para solucionar menú en la parte superior.

<!-- SMOOTH SCROLL --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top-150 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 
<!-- End of SMOOTH SCROLL --> 

Answer 6

Se trata de una aplicación que utilizo jQuery que se basaba en la solución de Никита Андрейчук. La variable de ajuste de píxeles se puede configurar dinámicamente de esta manera, aunque está codificada en este ejemplo.

$('a').each(function() { 
    var pixels = 145; 
    var name = $(this).attr('name'); 
    if (typeof name != 'undefined') { 
     $(this).css({ 
      'display' : 'block', 
      'height'  : pixels + 'px', 
      'margin-top' : '-' + pixels + 'px', 
      'visibility' : 'hidden' 
     }); 
    } 
}); 

Answer 7

Esto es lo que uso. Establezca el desplazamiento a lo que necesita.

$('a[href^="#"]').click(function(e) { 
    e.preventDefault(); 
    $(window).stop(true).scrollTo(this.hash {duration:1000,interrupt:true,offset: -50}); 
});