jquery - elegant - plantilla divi wordpress gratis
¿Cómo deshabilitar el anclaje "saltar" al cargar una página? (14)
Otro enfoque
Intente verificar si la página se ha desplazado y solo luego restablecer la posición:
var scrolled = false;
$(window).scroll(function(){
scrolled = true;
});
if ( window.location.hash && scrolled ) {
$(window).scrollTop( 0 );
}
Creo que esto puede no ser posible, intentaré y explicaré lo mejor que pueda. Tengo una página que contiene pestañas (jquery powered), controlada por lo siguiente:
Estoy usando este código, proporcionado por otro usuario de una pregunta anterior.
<script type="text/javascript">
$(function() {
$(''html, body'').animate({scrollTop:0}); // this is my "fix"
var tabContent = $(".tab_content");
var tabs = $("#menu li");
var hash = window.location.hash;
tabContent.not(hash).hide();
if(hash=="") {
$(''#tab1'').fadeIn();
}
tabs.find(''[href='' + hash + '']'').parent().addClass(''active'');
tabs.click(function() {
$(this).addClass(''active'').siblings().removeClass(''active'');
tabContent.hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
este código funciona muy bien cuando visito la página "pestañas" directamente.
sin embargo, necesito vincular a pestañas individuales de otras páginas, así que para hacer esto, el código obtiene la window.location.hash luego muestra la pestaña correspondiente.
la página no "salta" al anclaje debido a "return false".
este evento solo se desencadena en un evento click sin embargo. por lo tanto, si visito mis "pestañas" desde cualquier otra página, se activa el efecto "saltar". Para combatir esto, me desplazo automáticamente a la parte superior de la página, pero prefiero que esto no suceda.
¿Hay alguna manera de simular "return false" cuando la página se carga, evitando que el anclaje "jump" ocurra?
Espero que esté bastante claro.
Gracias
El navegador salta a
<element id="abc" />si hay http://site.com/#abc hash en la dirección y el elemento con id = "abc" es visible. Por lo tanto, solo debe ocultar el elemento de forma predeterminada:<element id="anchor" style="display: none" />. Si no hay ningún elemento visible con id = hash en la página, el navegador no saltará.Cree un script que verifique el hash en la url, y luego encuentre y muestre el elemento apropiado (que está oculto de manera predeterminada).
Deshabilite el comportamiento predeterminado de "enlace tipo hash" vinculando un evento onclick a un enlace y especifique
return false;como resultado del evento onclick.
Cuando implementé pestañas, escribí algo así:
<script>
$(function () {
if (location.hash != "") {
selectPersonalTab(location.hash);
}
else {
selectPersonalTab("#cards");
}
});
function selectPersonalTab(hash) {
$("#personal li").removeClass("active");
$("a[href$=" + hash + "]").closest("li").addClass("active");
$("#personaldata > div").hide();
location.hash = hash;
$(hash).show();
}
$("#personal li a").click(function (e) {
var t = e.target;
if (t.href.indexOf("#") != -1) {
var hash = t.href.substr(t.href.indexOf("#"));
selectPersonalTab(hash);
return false;
}
});
</script>
¿Tu arreglo no funciona? No estoy seguro si entiendo la pregunta correctamente, ¿tienes una página de demostración? Tu podrías intentar:
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
Edición: probado y funciona en Firefox, IE y Chrome en Windows.
Edición 2: mueva setTimeout() dentro del bloque, props @vsync.
CSS sucio solo se arregla para mantenerse desplazado cada vez que se utiliza el anclaje (no es útil si aún desea utilizar anclajes para desplazamiento-saltos, muy útil para deeplinking):
.elementsWithAnchorIds::before {
content: "";
display: block;
height: 9999px;
margin-top: -9999px; //higher thin page height
}
Creo que he encontrado una forma de UI Tabs sin rehacer la funcionalidad. Hasta ahora no he encontrado ningún problema.
$( ".tabs" ).tabs();
$( ".tabs" ).not(".noHash").bind("tabsshow", function(event, ui) {
window.location.hash = "tab_"+ui.tab.hash.replace(/#/,"");
return false;
});
var selectedTabHash = window.location.hash.replace(/tab_/,"");
var index = $( ".tabs li a" ).index($(".tabs li a[href=''"+selectedTabHash+"'']"));
$( ".tabs" ).not(".noHash").tabs(''select'', index);
Todo dentro de un evento listo. Prepara "tab_" para el hash pero funciona tanto al hacer clic como en la página cargada con hash.
Hay otras maneras de rastrear en qué pestaña está; tal vez establecer una cookie, o un valor en un campo oculto, etc. etc.
Diría que si no quieres que la página salte con la carga, sería mejor que utilizases una de estas otras opciones en lugar del hash, porque la razón principal para usar el hash en lugar de ellas es permitir exactamente lo que Estás deseando bloquear.
Otro punto: la página no saltará si sus enlaces hash no coinciden con los nombres de las etiquetas en el documento, por lo que quizás, si desea seguir utilizando el hash, podría manipular el contenido para que las etiquetas tengan un nombre diferente. Si usa un prefijo consistente, aún podrá usar Javascript para saltar entre ellos.
Espero que ayude.
Intenta esto para evitar que el cliente realice cualquier tipo de desplazamiento vertical en hashchanged (dentro de tu controlador de eventos):
var sct = document.body.scrollTop;
document.location.hash = ''#next''; // or other manipulation
document.body.scrollTop = sct;
(redibujo del navegador)
Ninguna de las respuestas funciona lo suficientemente bien para mí, veo la página saltando al ancla y luego a la parte superior de algunas soluciones, algunas respuestas no funcionan en absoluto, pueden cambiar las cosas durante años. Espero que mi función ayude a alguien.
/**
* Prevent automatic scrolling of page to anchor by browser after loading of page.
* Do not call this function in $(...) or $(window).on(''load'', ...),
* it should be called earlier, as soon as possible.
*/
function preventAnchorScroll() {
var scrollToTop = function () {
$(window).scrollTop(0);
};
if (window.location.hash) {
// handler is executed at most once
$(window).one(''scroll'', scrollToTop);
}
// make sure to release scroll 1 second after document readiness
// to avoid negative UX
$(function () {
setTimeout(
function () {
$(window).off(''scroll'', scrollToTop);
},
1000
);
});
}
No he tenido ningún éxito constante con estas soluciones.
Aparentemente debido al hecho de que el salto ocurre antes de Javascript => reference ( http://forum.jquery.com/topic/preventing-anchor-jump )
Mi solución es posicionar todos los anclajes en la parte superior de forma predeterminada con CSS.
.scroll-target{position:fixed;top:0;left:0;}
Luego use jquery para desplazarse al padre del ancla de destino, o un hermano (tal vez una etiqueta em vacía)
<a class="scroll-target" name="section3"></a><em> </em>
Ejemplo de jquery para desplazarse cuando la URL se ingresa con hash
(la página no debe estar cargada en la ventana / pestaña, esto cubre enlaces de otras fuentes externas)
setTimeout(function() {
if (window.location.hash) {
var hash = window.location.hash.substr(1);
var scrollPos = $(''.scroll-target[name="''+hash+''"]'').siblings(''em'').offset().top;
$("html, body").animate({ scrollTop: scrollPos }, 1000);
}
}, 1);
También querrá evitar el valor predeterminado para los clics de anclaje en la página y luego desplazarse a sus destinos
<a class="scroll-to" href="#section3">section three</a>
y jquery
$(''a.scroll-to'').click(function(){
var target = $(this).attr(''href'').substr(1);
var scrollPos = $(''.scroll-target[name="''+target+''"]'').siblings(''em'').offset().top;
$("html, body").animate({ scrollTop: scrollPos }, 1000);
return false;
});
Lo bueno de este método es que los objetivos de la etiqueta de anclaje permanecen estructuralmente al lado del contenido relevante, aunque su posición de CSS está en la parte superior.
Esto debería significar que los rastreadores de motores de búsqueda no tendrán problemas.
Saludos, espero que esto ayude
gris
No tuve mucho éxito con los métodos setTimeout anteriores en Firefox.
En lugar de un setTimeout, he usado una función de carga:
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
}
};
Todavía es muy impreciso, desafortunadamente.
Resolvió mi promlem al hacer esto:
// navbar height
var navHeigth = $(''nav.navbar'').height();
// Scroll to anchor function
var scrollToAnchor = function(hash) {
// If got a hash
if (hash) {
// Scroll to the top (prevention for Chrome)
window.scrollTo(0, 0);
// Anchor element
var term = $(hash);
// If element with hash id is defined
if (term) {
// Get top offset, including header height
var scrollto = term.offset().top - navHeigth;
// Capture id value
var id = term.attr(''id'');
// Capture name value
var name = term.attr(''name'');
// Remove attributes for FF scroll prevention
term.removeAttr(''id'').removeAttr(''name'');
// Scroll to element
$(''html, body'').animate({scrollTop:scrollto}, 0);
// Returning id and name after .5sec for the next scroll
setTimeout(function() {
term.attr(''id'', id).attr(''name'', name);
}, 500);
}
}
};
// if we are opening the page by url
if (location.hash) {
scrollToAnchor(location.hash);
}
// preventing default click on links with an anchor
$(''a[href*="#"]'').click(function(e) {
e.preventDefault();
// hash value
var hash = this.href.substr(this.href.indexOf("#"));
scrollToAnchor(hash);
});`
Si bien la respuesta aceptada funciona bien, encontré que a veces, especialmente en las páginas que contienen imágenes grandes, la barra de desplazamiento saltará de forma salvaje utilizando
window.scrollTo(0, 0);
Que puede ser bastante molesto para el usuario.
La solución que establecí al final es en realidad bastante simple, y eso es usar una ID diferente en el objetivo a la que se usa en location.hash
P.ej:
Aquí está el enlace en alguna otra página
<a href="/page/with/tabs#tab2">Some info found in tab2 on tabs page</a>
Entonces, por supuesto, si hay un elemento con un ID de tab2 en la página de pestañas, la ventana saltará a él cuando se cargue.
Para que pueda agregar algo al ID para evitarlo:
<div id="tab2-noScroll">tab2 content</div>
Y luego puedes agregar "-noScroll" a location.hash en el javascript:
<script type="text/javascript">
$(function() {
var tabContent = $(".tab_content");
var tabs = $("#menu li");
var hash = window.location.hash;
tabContent.not(hash + ''-noScroll'').hide();
if(hash=="") { //^ here
$(''#tab1-noScroll'').fadeIn();
}
tabs.find(''[href='' + hash + '']'').parent().addClass(''active'');
tabs.click(function() {
$(this).addClass(''active'').siblings().removeClass(''active'');
tabContent.hide();
var activeTab = $(this).find("a").attr("href") + ''-noScroll'';
//^ and here
$(activeTab).fadeIn();
return false;
});
});
</script>
Usé la solución de dave1010, pero estaba un poco nervioso cuando lo puse dentro de la función $ () listo. Así que hice esto: (no dentro de $ (). Ready)
if (location.hash) { // do the test straight away
window.scrollTo(0, 0); // execute it straight away
setTimeout(function() {
window.scrollTo(0, 0); // run it a bit later also for browser compatibility
}, 1);
}
Vea mi respuesta aquí: Answer
El truco consiste en eliminar el hashtag lo antes posible y almacenar su valor para su propio uso:
Es importante que no coloque esa parte del código en las funciones $ () o $ (ventana) .load (), ya que sería demasiado tarde y el navegador ya se haya movido a la etiqueta.
// store the hash (DON''T put this code inside the $() function, it has to be executed
// right away before the browser can start scrolling!
var target = window.location.hash,
target = target.replace(''#'', '''');
// delete hash so the page won''t scroll to it
window.location.hash = "";
// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).on(''load'', function() {
if (target) {
$(''html, body'').animate({
scrollTop: $("#" + target).offset().top
}, 700, ''swing'', function () {});
}
});