Comment désactiver le «saut» d’ancrage lors du chargement d’une page?

Je pense que cela peut ne pas être possible, va essayer d’expliquer le mieux possible. J’ai une page contenant des tabs (jquery powered), contrôlés par les éléments suivants:

J’utilise ce code, fourni par un autre utilisateur à partir d’une question précédente.

 $(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; }); });  

Ce code fonctionne bien lorsque je visite directement la page “tabs”.

Cependant, je dois créer un lien vers des tabs d’invidual des autres pages – pour ce faire, le code obtient le window.location.hash puis affiche l’onglet approprié.

la page ne “saute” pas à l’ancre à cause de “return false”.

Cet événement n’est déclenché que lors d’un événement de clic. par conséquent, si je visite mes “tabs” depuis n’importe quelle autre page, l’effet “saut” est déclenché. Pour lutter contre cela, je fais automatiquement défiler vers le haut de la page, mais je préfère que cela ne se produise pas.

y a-t-il un moyen de simuler “return false” lorsque la page se charge, empêchant l’ancrage de “sauter”?

J’espère que c’est assez clair.

Merci

Votre correctif ne fonctionne pas? Je ne suis pas sûr de comprendre la question correctement – avez-vous une page de démonstration? Tu pourrais essayer:

 if (location.hash) { setTimeout(function() { window.scrollTo(0, 0); }, 1); } 

Edit: testé et fonctionne sous Firefox, IE et Chrome sous Windows.
Edit 2: déplacez setTimeout() dans if block, props @vsync.

Voir ma réponse ici: Stackoverflow Answer

L’astuce consiste à supprimer le hashtag ASAP et à stocker sa valeur pour votre propre usage:

Il est important de ne pas placer cette partie du code dans les fonctions $ () ou $ (window) .load () car il serait trop tard et le navigateur a déjà été déplacé vers la balise.

 // 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 () {}); } }); 

Il existe d’autres moyens de suivre l’onglet sur lequel vous vous trouvez; peut-être mettre un cookie, ou une valeur dans un champ caché, etc. etc.

Je dirais que si vous ne voulez pas que la page saute en charge, il serait préférable d’utiliser l’une de ces autres options plutôt que le hachage, car la raison principale de l’utilisation du hachage est de permettre exactement ce que vous voulez. veux bloquer.

Un autre point – la page ne saute pas si vos liens de hachage ne correspondent pas aux noms des balises du document, donc peut-être que si vous voulez continuer à utiliser le hachage, vous pouvez manipuler le contenu pour que les balises soient nommées différemment. Si vous utilisez un préfixe cohérent, vous pourrez toujours utiliser Javascript pour sauter entre les deux.

J’espère que cela pourra aider.

J’ai utilisé la solution de dave1010, mais c’était un peu nerveux quand je l’ai mise dans la fonction $ (). Ready. J’ai donc fait ceci: (pas dans le $ (). Prêt)

  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); } 
  1. Le navigateur passe à s’il y a http://site.com/#abc hash dans l’adresse et l’élément avec id = “abc” est visible. Vous devez donc simplement masquer l’élément par défaut: . S’il n’y a pas d’élément visible avec id = hash à la page, le navigateur ne sauterait pas.

  2. Créez un script qui vérifie le hachage dans l’URL, puis trouve et affiche l’élément approprié (qui est masqué par défaut).

  3. Désactivez le comportement par défaut “lien de hachage” en liant un événement onclick à un lien et spécifiez return false; à la suite d’un événement onclick.

Quand j’ai implémenté des tabs, j’ai écrit quelque chose comme ça:

   

sale CSS seulement fixe pour restr défiler vers le haut chaque fois que l’ancre est utilisée (pas utile si vous voulez toujours utiliser des ancres pour les sauts de défilement, très utile pour le deeplinking):

 .elementsWithAnchorIds::before { content: ""; display: block; height: 9999px; margin-top: -9999px; //higher thin page height } 

Bien que la réponse acceptée fonctionne bien, j’ai trouvé que parfois, en particulier sur les pages contenant de grandes images, la barre de défilement

  window.scrollTo(0, 0); 

Ce qui peut être très distrayant pour l’utilisateur.

La solution que j’ai choisie à la fin est en fait assez simple et consiste à utiliser un identifiant différent sur la cible pour celui utilisé dans location.hash

Par exemple:

Voici le lien sur une autre page

 Some info found in tab2 on tabs page 

Donc, bien sûr, s’il y a un élément avec un identifiant de tab2 sur la page des tabs, la fenêtre sautera à la charge.

Vous pouvez donc append quelque chose à l’ID pour l’empêcher:

 
tab2 content

Et puis vous pouvez append "-noScroll" à location.hash dans le javascript:

  

Aucune des réponses ne fonctionne pas assez bien pour moi, je vois le saut de page à l’ancre et puis pour certaines solutions, certaines réponses ne fonctionnent pas du tout, les choses peuvent changer pendant des années. J’espère que ma fonction aidera quelqu’un.

 /** * 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 ); }); } 

Je pense que j’ai trouvé un moyen pour les tabs d’interface utilisateur sans refaire la fonctionnalité. Jusqu’à présent, je n’ai trouvé aucun problème.

  $( ".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); 

Tout dans un événement prêt. Il ajoute “tab_” au hachage mais fonctionne quand on clique dessus et que la page est chargée avec le hachage.

Une autre approche

Essayez de vérifier si la page a été défilée, puis uniquement de réinitialiser la position:

 var scrolled = false; $(window).scroll(function(){ scrolled = true; }); if ( window.location.hash && scrolled ) { $(window).scrollTop( 0 ); } 

Heres une démo

Je n’ai pas eu beaucoup de succès avec les méthodes setTimeout ci-dessus dans Firefox.

Au lieu d’un setTimeout, j’ai utilisé une fonction onload:

 window.onload = function () { if (location.hash) { window.scrollTo(0, 0); } }; 

C’est toujours très glitchy, malheureusement.

Je n’ai eu aucun succès cohérent avec ces solutions.

Apparemment dû au fait que le saut se produit avant Javascript => reference ( http://forum.jquery.com/topic/preventing-anchor-jump )

Ma solution est de positionner tous les ancrages en haut par défaut avec CSS.

 .scroll-target{position:fixed;top:0;left:0;} 

Ensuite, utilisez jquery pour rechercher le parent de l’ancre cible ou un frère (peut-être une balise em vide)

 &nbsp 

Exemple de jquery pour faire défiler quand une URL est entrée avec un hachage
(la page ne doit pas être déjà chargée dans une fenêtre / un onglet, cela couvre les liens provenant d’autres sources / sources externes)

 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); 

Vous voudrez également éviter les clics par défaut sur la page, puis faites défiler les cibles

 section three 

et 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; }); 

La bonne chose à propos de cette méthode est que les cibles des balises d’ancrage restnt structurellement à côté du contenu pertinent, bien que leur position CSS soit en haut.

Cela signifie que les robots des moteurs de recherche n’auront aucun problème.

Cheers, j’espère que cela aide
Gris

Essayez ceci pour empêcher le client de tout type de défilement vertical sur hashchanged (dans votre gestionnaire d’événements):

 var sct = document.body.scrollTop; document.location.hash = '#next'; // or other manipulation document.body.scrollTop = sct; 

(navigateur redessiné)

J’ai résolu mon problème en faisant ceci:

 // 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 atsortingbutes 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); });`