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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Attendre le chargement d'une nouvelle page après click

tompouss

Petit chat

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

Publicité

tompouss

Petit chat

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 :

var target;
var link;
(function () {
$('a[href*="#"]:not([href="#"])').click(function() {
console.log('test');
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
{
console.log('test2');
target = $(this.hash);
link = target.length ? target : $('[name=' + this.hash.slice(1) +']');
console.log(link);
setTimeout(
function (link) {
console.log(link);
$('html, body').animate({
scrollTop: link.offset().top - 100
}, 700);
return false;
},
500);
}
})
})();

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

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

rufo

Pas me confondre avec Lycos!

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

tompouss

Petit chat

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 :

let target;
let jump = (e) => {
console.log('into jump');
console.log('This');
console.log($(this));
console.log('location');
console.log(location);
if (e) {
e.preventDefault();
target = $(this).attr("href" );
} else {
target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top-300
}, 500, function () {
location.hash = target;
});
}
let scroll = ()=> {
$(window).scroll((e) => {
e.preventDefault();
let $header = $('#header');
let $logo = $('#logo');
let $offCanvas = $('#offCanvas');
let aTop = $header.height();
if ($(window).scrollTop() >= aTop) {
$header.addClass('fixed-header');
$logo.addClass('invisible');
$offCanvas.css('margin-top', 75);
}
else {
$header.removeClass('fixed-header');
$logo.removeClass('invisible');
$offCanvas.css('margin-top', 0);
}
});
};
$(document).ready(function () {
scroll();
$('.scroll-btn a').on("click", jump.call($(this)));
if (location.hash) {
setTimeout(() => {
$('html, body').scrollTop(0).show();
jump.call($(this));
}, 0);
} else {
$('html, body').show();
}
});

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

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

FORUM HardWare.fr

Programmation

Javascript/Node.js

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

Sujets relatifs
Installation imprimante réseau via page web	Transition de page en html et css
[Ajax] Récupèrer l'action lors d'événement après rechargement de page	Reset plusieurs textbox.text sur la même page.
Pied de page HTML	[Web] Chargement d'image par drag 'n drop
Ouverture d'une page d'un multipage avec un mot de passe	Créer une page sur Adobe Muse
Problème de chargement CSS dans HTML	Impression et mise en page automatique
Plus de sujets relatifs à : Attendre le chargement d'une nouvelle page après click

Page générée en 0.061 secondes