1
votes

Allez en haut de la page avant d'ouvrir le lien dans la même fenêtre (onglet). Comment?

Je veux aller en haut de la page lorsque je clique sur le lien puis ouvrir le lien dans le même onglet

J'ai essayé d'utiliser ce code, mais je vais seulement en haut de la page et le lien ne s'ouvre pas p >

Ceci est mon JS

<a href="./current_page?page=5" class="scrollToTop">&gt;</a>

Et ceci est mon lien HTML

$(document).ready(function(){
$('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},1800);
        return false;
    });
});

Veuillez aider) p >

javascript jquery html css

1 commentaires

Ourrrr vous pouvez cibler et point d'ancrage avec un href droit dans le lien ..... w3docs.com/snippets/html/...

3 Réponses :

0
votes

Essayez ceci

$(document).ready(function(){
    $('.scrollToTop').click(function(){
        const url = $(this).attr('href');
        $('html, body').animate({scrollTop : 0}, 1800, function() {
            window.open(url);
        });
        return false;
    });
});

2 commentaires

Cela fonctionne mais ouvre le lien dans un nouvel onglet, je veux l'ouvrir dans le même onglet

ajouter un deuxième paramètre à window.open : window.open (url, '_self')

0
votes

Une façon d'y parvenir consiste à exécuter la navigation de page via JavaScript, une fois l'animation de défilement vers le haut terminée.

Cela peut être fait en naviguant dans le navigateur pendant le rappel .promise (). done (..) , où vous mettriez à jour le location en href de le lien cliqué:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<a href="./current_page?page=5" class="scrollToTop">Scroll to top, then navigate &gt;</a>

$(document).ready(function() {

  $('.scrollToTop').click(function() {

    /* Obtain href from clicked link element */
    const href = $(this).attr('href');

    $('html, body').animate({
        scrollTop: 0
      }, 1800)
      .promise()
      .done(function() {

        /* After animation complete, navigate to link's href */
        location = href;

        console.log(`Navigate: ${href} (won't work in stack overflow sandbox)`);
      });

    return false;
  });
});

6 commentaires

Est-il possible de le faire de manière asynchrone sans attendre la fin de l'animation?

Vous voulez dire démarrer la navigation pendant le défilement?

Oui) Parce que maintenant je dois attendre à la fin de la page pendant le chargement de la nouvelle page

Le risque de faire cela est que si la page se charge avant la fin de l'animation, vos utilisateurs ne subiront pas le défilement.

Vous voulez dire que la nouvelle page commencera à l'endroit où l'ancienne page a cessé de défiler?

Non, si la nouvelle page chargée avant la fin de l'animation de défilement, l'utilisateur passera à la nouvelle page où il sera positionné en haut de l'écran

0
votes

Puisque votre événement click renvoie false , la balise href de votre ancre ne sera pas redirigée.

Notez que puisque vous modifiez des itinéraires via une ancre, la page chargée commencera toujours en haut du corps.

2 commentaires

Je change de faux en vrai et tout fonctionne maintenant! Merci! C'est exactement ce que je voulais réaliser. Lorsque l'animation commence, une nouvelle page se charge, et cela semble un peu plus rapide pour l'utilisateur Avant c'était quelque chose comme: l'utilisateur clique sur le bouton de la page suivante, tout se fige à cause du chargement, puis lorsque la page est complètement chargée, elle s'ouvre à partir de son haut

Heureux d'avoir pu aider :)