plantillas - jQuery se desplaza al ancla(menos la cantidad establecida de píxeles)
elegantthemes wordpress (8)
Esta es una implementación de jQuery que utilizo que se basó en la solución de Никита Андрейчук. La variable de ajuste de píxel se puede establecer 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''
});
}
});
Estoy usando el siguiente código para desplazarme a los 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 de hacer que se desplace hacia ese ancla pero menos una cantidad establecida de píxeles? (en mi caso quiero que vaya -92px)
Gracias por cualquier ayuda.
Este código funciona para mí en cualquier ancla de enlace en mi sitio respetando la altura de "150px" para el menú de arreglos 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 -->
Esto es lo que 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 sumar / restar.
Esto es lo que yo uso. Establezca la compensación a lo que necesita.
$(''a[href^="#"]'').click(function(e) {
e.preventDefault();
$(window).stop(true).scrollTo(this.hash {duration:1000,interrupt:true,offset: -50});
});
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>
No pude usar la solución de Jonathan Savage porque no pude pasar una devolución de llamada de evento a animate () sin error. Tuve este problema hoy y encontré una solución simple:
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 de píxeles de la variable targetOffset, luego asigne location.hash a esa variable. Detiene el salto de página cuando se desplaza al hash de destino.
No queriendo aprender Javascript y siempre buscando la opción más fácil, simplemente cree un DIV vacío sobre el punto de anclaje en el que desea aterrizar, luego en CSS haga el div
anchorpointl {margin-top: -115px;}
o por mucho que esté arriba o abajo quiere ir y los trabajos realizados
Solo tuve que resolver este problema yo mismo. Debe ajustar el desplazamiento en función de la cantidad de píxeles que desea desplazar. 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 está haciendo tambalearse para usted es location.hash: esto le 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 dejaremos.
Sin embargo, para evitar que el navegador "salte" cuando se establece location.hash (una acción predeterminada del navegador), simplemente debe evitar la acción predeterminada. Entonces, pase su evento ''e'' a través de la función de finalización en la función animar. Entonces simplemente llame a e.preventDefault (). Tendrá que asegurarse de que el navegador esté llamando a un evento, de lo contrario se producirá un error. Por lo tanto, un if-test corrige eso.
Hecho. Aquí está el fragmento 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;
});
});
}