Attendre le chargement d'une nouvelle page après click

Attendre le chargement d'une nouvelle page après click - Javascript/Node.js - Programmation

Marsh Posté le 03-01-2018 à 10:46:13    

Bonjour,
 
 
je bloque sur un truc en jquery 3 depuis quelques jours:
 
j'essaie de scroller sur une ancre après un click sur un lien interne.
 
C'est pas très compliqué et le script foncionne bien, sauf quand l'ancre se trouve sur une autre page.
 
Je voulais savoir s'il existait un moyen propre de lancer une method scrollTop après que la page soit chargée, après un click.
 
j'ai déjà testé pas mal de trucs (utilisation d'un script bizarre avec pattern observer, methode wait, etc, queue) mais comme je suis une quiche en javascript je tourne un peu en rond.
 
Quelle serait d'après vous la/les meilleure(s) approche(s) pour résoudre mon probleme ?
 
 Merci pour votre aide :)
 
Tom


---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 03-01-2018 à 10:46:13   

Reply

Marsh Posté le 03-01-2018 à 12:28:02    

J'ai pondu un peu de code pas super propre mais à cause de la fatigue (et à côté de mes pompes) j'ai du mal à débugger.
 

Code :
  1. var target;
  2. var link;
  4. (function () {
  5.     $('a[href*="#"]:not([href="#"])').click(function() {
  6.         console.log('test');
  7.         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
  8.         {
  9.             console.log('test2');
  10.              target = $(this.hash);
  11.             link = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  12.             console.log(link);
  13.             setTimeout(
  14.                 function (link) {
  15.                     console.log(link);
  16.                     $('html, body').animate({
  17.                         scrollTop: link.offset().top - 100
  18.                     }, 700);
  19.                     return false;
  20.                 },
  21.                 500);
  23.         }
  24.     })
  25. })();


Message édité par tompouss le 03-01-2018 à 12:31:53

---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 04-01-2018 à 11:56:33    

Je pense que ton pb avec une ancre située sur une autre page vient tout simplement du fait que ton javascript ne peut s'exécuter puisque tu changes de page.
 
Dans ce cas-là, sur le onload de la page, il faut récupérer le window.location et vérifier s'il y a une ancre et si oui, appliquer le scroll.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 04-01-2018 à 21:02:22    

Ok voici mon code fonctionnel, basé sur ce lien https://stackoverflow.com/questions [...] erent-page
et adapté pour es6.
C'est pas super sexy, et je pige pas tout, mais ca fonctionne et ca me va pour le moment
 
merci rufo de m'avoir mis sur la bonne voie
Si vous avez des idées pour améliorer ca, n'hésitez pas :)
 

Code :
  1. let target;
  5. let jump = (e) => {
  9.     console.log('into jump');
  10.     console.log('This');
  11.     console.log($(this));
  12.     console.log('location');
  13.     console.log(location);
  14.     if (e) {
  15.         e.preventDefault();
  17.         target = $(this).attr("href" );
  18.     } else {
  19.         target = location.hash;
  20.     }
  23.     $('html,body').animate(
  24.         {
  25.             scrollTop: $(target).offset().top-300
  26.         }, 500, function () {
  27.             location.hash = target;
  28.         });
  30. }
  33. let scroll = ()=> {
  35.     $(window).scroll((e) => {
  36.         e.preventDefault();
  37.         let $header = $('#header');
  38.         let $logo = $('#logo');
  39.         let $offCanvas = $('#offCanvas');
  40.         let aTop = $header.height();
  42.         if ($(window).scrollTop() >= aTop) {
  43.             $header.addClass('fixed-header');
  44.             $logo.addClass('invisible');
  45.             $offCanvas.css('margin-top', 75);
  47.         }
  48.         else {
  49.             $header.removeClass('fixed-header');
  50.             $logo.removeClass('invisible');
  51.             $offCanvas.css('margin-top', 0);
  52.         }
  53.     });
  54. };
  57. $(document).ready(function () {
  59.     scroll();
  60.     $('.scroll-btn a').on("click", jump.call($(this)));
  63.     if (location.hash) {
  64.         setTimeout(() => {
  65.             $('html, body').scrollTop(0).show();
  66.             jump.call($(this));
  67.         }, 0);
  68.     } else {
  69.         $('html, body').show();
  70.     }
  72.    
  73. });


Message édité par tompouss le 04-01-2018 à 21:06:16

---------------
collectionneur de pâtes thermiques
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed