J'ai quelques hyperliens sur ma page. Une FAQ que les utilisateurs liront lorsqu'ils visiteront ma section d'aide.
À l'aide de liens d'ancrage, je peux faire défiler la page vers l'ancre et y guider les utilisateurs.
Existe-t-il un moyen de rendre ce défilement fluide?
Mais notez qu'il utilise une bibliothèque JavaScript personnalisée. Peut-être que jQuery propose quelque chose comme ça cuit au four?
Réponses:
Mise à jour d'avril 2018: il existe désormais une manière native de procéder :
Ceci n'est actuellement pris en charge que dans les navigateurs les plus innovants.
Pour une prise en charge de navigateur plus ancienne, vous pouvez utiliser cette technique jQuery:
Et voici le violon: http://jsfiddle.net/9SDLw/
Si votre élément cible n'a pas d'ID et que vous y liez par son
name
, utilisez ceci:Pour des performances accrues, vous devez mettre en cache ce
$('html, body')
sélecteur, afin qu'il ne s'exécute pas à chaque fois qu'une ancre est cliquée:Si vous souhaitez que l'URL soit mise à jour, faites-le dans le
animate
rappel:la source
scrollTop: $(this.hash).offset().top
lieu descrollTop: $(this.href).offset().top
?scrollTop: $(href).offset().top - 72
html, body
objet ici n'est pas nécessaire, exécuter un sélecteur une fois par clic n'est pas vraiment beaucoup.La syntaxe correcte est:
Simplifier : SEC
Explication de
href*=\\#
:*
signifie qu'il correspond à ce qui contient#
char. Ne correspondent donc qu'aux ancres . Pour en savoir plus sur la signification de cela, voir ici\\
est parce que le#
est un caractère spécial dans le sélecteur css, nous devons donc y échapper.la source
$('a')
pour$('a[href*=#]')
ne servir que les URL d'ancrage<a href="javascript:$('#test').css('background-color', '#000')">Test</a>
. Vous devriez plutôt utiliser$('a[href^=#]')
pour faire correspondre toutes les URL commençant par un caractère de hachage.a[href^=\\#]
La nouvelle actualité de CSS3. C'est beaucoup plus facile que toutes les méthodes répertoriées sur cette page et ne nécessite pas de Javascript. Entrez simplement le code ci-dessous dans votre CSS et tout d'un coup les liens pointent vers des emplacements à l'intérieur de votre propre page auront une animation de défilement fluide.
Après cela, tout lien pointant vers un div glissera en douceur vers ces sections.
Edit: Pour ceux qui sont confus à propos de ce qui précède, une balise. Fondamentalement, c'est un lien cliquable. Vous pouvez alors avoir une autre balise div quelque part dans votre page Web comme
À cet égard, le lien a sera cliquable et ira à n'importe quelle section, dans ce cas, c'est notre div que nous avons appelé section.
BTW, j'ai passé des heures à essayer de le faire fonctionner. Trouvé la solution dans une section de commentaires obscurs. C'était buggé et ne fonctionnait pas dans certaines balises. N'a pas fonctionné dans le corps. Cela a finalement fonctionné lorsque je l'ai mis en html {} dans le fichier CSS.
la source
cela a fonctionné parfaitement pour moi
la source
Je suis surpris que personne n'ait publié une solution native qui s'occupe également de mettre à jour le hachage d'emplacement du navigateur pour qu'il corresponde. C'est ici:
Voir le tutoriel: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml
Pour les sites avec des en-têtes collants,
scroll-padding-top
CSS peut être utilisé pour fournir un décalage.la source
Uniquement CSS
Tout ce dont vous avez besoin pour ajouter seulement cela. Maintenant, votre comportement de défilement des liens internes sera fluide comme un flux de flux.
Remarque : Tous les navigateurs les plus récents (
Opera
,Chrome
,Firefox
etc) prend en charge cette fonctionnalité.pour une compréhension détaillée, lisez cet article
la source
Je vous suggère de faire ce code générique:
Vous pouvez voir un très bon article ici: jquery-effet-smooth-scroll-defilement-fluide
la source
Officiel: http://css-tricks.com/snippets/jquery/smooth-scrolling/
la source
Il y a déjà beaucoup de bonnes réponses ici - mais elles manquent toutes du fait que les ancres vides doivent être exclues . Sinon, ces scripts génèrent des erreurs JavaScript dès que l'on clique sur une ancre vide.
À mon avis, la bonne réponse est la suivante:
la source
Utilisation de JQuery:
la source
Il existe une prise en charge native du défilement fluide sur les parchemins d'ID de hachage.
Vous pouvez jeter un œil: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
la source
La réponse donnée fonctionne mais désactive les liens sortants. Ci-dessous une version avec un bonus supplémentaire facilité (swing) et respecte les liens sortants.
la source
stop()
cependant la miette d'url ne fonctionne pas comme prévu: le bouton Retour ne ramène pas, c'est parce que lorsque la miette est définie dans l'url après la fin de l'animation. C'est mieux sans une miette dans l'url, par exemple, c'est comme ça que fait airbnb.HTML
ou avec URL complète absolue
jQuery
la source
Les navigateurs modernes sont un peu plus rapides de nos jours. Un setInterval peut fonctionner. Cette fonction fonctionne bien dans Chrome et Firefox de nos jours. (Un peu lent en safari, n'a pas dérangé avec IE)
la source
Il existe un moyen css de le faire en utilisant scroll-behavior. Ajoutez la propriété suivante.
Et c'est tout. Aucun JS requis.
PS: veuillez vérifier la compatibilité du navigateur.
la source
Ajout de ceci:
annule en quelque sorte le décalage vertical
dans Firefox et IE, mais pas dans Chrome. Fondamentalement, la page défile en douceur jusqu'au point où elle doit s'arrêter en fonction du décalage, mais saute ensuite à l'endroit où la page irait sans le décalage.
Il ajoute le hachage à la fin de l'URL, mais appuyer sur le bouton ne vous ramène pas en haut, il supprime simplement le hachage de l'URL et laisse la fenêtre de visualisation où il se trouve.
Voici le js complet que j'utilise:
la source
Cette solution fonctionnera également pour les URL suivantes, sans rompre les liens d'ancrage vers différentes pages.
etc.
Je n'ai pas encore testé cela dans tous les navigateurs.
la source
Cela permettra à jQuery de discerner facilement votre hachage cible et de savoir quand et où s'arrêter.
la source
la source
Code testé et vérifié
la source
J'ai fait cela pour les ancres href "/ xxxxx # asdf" et "#asdf"
la source
Voici la solution que j'ai implémentée pour plusieurs liens et ancres, pour un défilement fluide:
http://www.adriantomic.se/development/jquery-localscroll-tutorial/ si vous avez vos liens de navigation configurés dans une div de navigation et déclarés avec cette structure:
et vos destinations de balise d'ancrage correspondantes comme suit:
Ensuite, chargez-le simplement dans la tête du document:
Merci à @Adriantomic
la source
Si vous avez un simple bouton sur la page pour faire défiler vers le bas jusqu'à un div et que le bouton de retour fonctionne en sautant en haut, ajoutez simplement ce code:
Cela pourrait être étendu pour passer à différentes divisions également, en lisant la valeur de hachage et en faisant défiler comme Joseph Silbers répond.
la source
N'oubliez jamais que la fonction offset () donne la position de votre élément à documenter. Ainsi, lorsque vous devez faire défiler votre élément par rapport à son parent, vous devez utiliser ceci;
Le point clé est d'obtenir scrollTop de scroll-div et de l'ajouter à scrollTop. Si vous ne le faites pas, la fonction position () vous donne toujours des valeurs de position différentes.
la source
Vous pouvez utiliser
window.scroll()
avecbehavior: smooth
ettop
définir le haut décalé de la balise d'ancrage, ce qui garantit que la balise d'ancrage sera en haut de la fenêtre.Démo:
Afficher l'extrait de code
Vous pouvez simplement définir la propriété CSS
scroll-behavior
àsmooth
(qui aide les navigateurs les plus modernes) qui évite la nécessité de Javascript.Afficher l'extrait de code
la source
merci pour le partage, Joseph Silber. Voici votre solution 2018 en tant qu'ES6 avec une modification mineure pour conserver le comportement standard (faites défiler vers le haut):
la source
Nécessite jquery et anime pour ancrer la balise avec le nom spécifié au lieu de id, tout en ajoutant le hachage à l'URL du navigateur. Corrige également une erreur dans la plupart des réponses avec jquery où le signe # n'est pas préfixé par une barre oblique inversée. Le bouton de retour, malheureusement, ne revient pas correctement aux liens de hachage précédents ...
la source