11484 sujets

JavaScript, DOM et API Web HTML5

ScrollTo et Safari

Bonjour à tous,
Je viens de voir que ma page qui utilise ScrollTo ne fonctionne pas sur Safari Smiley fache
N'y connaissant rien à Javascript, je fais appel à vos connaissances Smiley cligne
Voici mon code :
          $('.scrollTo').click( function() { // Au clic sur un élément
                var page = $(this).attr('href'); // Page cible
                var speed = 750; // Durée de l'animation (en ms)
                $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
                return false;
          });
        });

Merci pour votre aide,
ED
Modérateur
Bonjour,

Ce code marche très bien avec Safari (et avec les autres aussi). Ton problème est a priori ailleurs.

EDIT: il faut vérifier la piste que donne Olivier C ci-dessus. C'est effectivement peut-être juste dû au paramétrage du Safari que tu utilises. Mais si c'est le cas, à mon avis, il ne faut rien mettre dans le code pour changer le comportement qui est a priori voulu par l'utilisateur.

Note : il y a peut-être un soucis si le href ne contient que "#", mais ce n'est pas spécifique à Safari.

Code complet de test :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
div.global {background:#eee;height:400vh;}
a
{
	display:block;
	background:red;color:white;text-decoration:none;
	border-radius:0.5em;width:10em;height:2em;line-height:2em;
	text-align:center;margin:0 auto;
}
</style>
</head>
<body>
<a id="haut-de-page" class="scrollTo" href="#bas-de-page">Bas de page</a>
<h1>Test</h1>
<div class="global">
<p>Toto va à la plage !</p>
</div>
<a id="bas-de-page" class="scrollTo" href="#haut-de-page">Haut de page</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script>
$(document).ready(function() {
	$('.scrollTo').click( function() { // Au clic sur un élément
		var page = $(this).attr('href'); // Page cible
		var speed = 1000; // Durée de l'animation (en ms)
		$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
		return false;
	});
});
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (22 Dec 2021 - 02:07)
Bonjour,
Merci beaucoup Olivier C et parsimonhi,
Dans mon cas, cela ne fonctionne pas, même si l'exemple de parsimonhi est parfait.
Je dirais même qu'avec le code de parsimonhi, cela ne fonctionne même plus sur Firefox.
Et le code d'Olivier C ne change rien Smiley confus
Mais merci encore pour votre aide,
Bonne journée à vous,
ED
Modérateur
Bonjour,
el_debutanti a écrit :

Je dirais même qu'avec le code de parsimonhi, cela ne fonctionne même plus sur Firefox.

Pourtant, le code que j'ai donné, quand il est tout seul, fonctionne très bien sur un firefox "qui sort de l'usine".

Ton problème est ailleurs.

Amicalement,
Modérateur
Bonjour,

Je viens de faire quelques tests supplémentaires et il semble que la propriété css "scroll-behavior" soit sur le point d'être supportée par safari (elle ne l'est pas dans le "safari officiel", mais elle l'est dans le "safari preview", donc ça devrait arriver dans pas longtemps). Par ailleurs, elle l'est déjà dans Chrome et Firefox.

En conséquence, on pourrait dès à présent envisager de se passer de jquery et js pour cette fonctionnalité et se contenter d'un simple "scroll-behavior:smooth" sur l'élément html.

EDIT: et au passage, ça marche même avec un href="#", ce qui n'est pas le cas avec le code de jquery.

Exemple complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
html {scroll-behavior:smooth;}
div.global {background:#eee;height:400vh;}
a
{
	display:block;
	background:red;color:white;text-decoration:none;
	border-radius:0.5em;width:10em;height:2em;line-height:2em;
	text-align:center;margin:0 auto;
}
</style>
</head>
<body>
<a id="haut-de-page" class="scrollTo" href="#bas-de-page">Bas de page</a>
<h1>Test</h1>
<div class="global">
<p>Toto va à la plage !</p>
</div>
<a id="bas-de-page" class="scrollTo" href="#haut-de-page">Haut de page</a>
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (22 Dec 2021 - 14:18)
Sujet clos
Aller à