Si vous cliquez sur les liens de navigation sur Hardly Code's website le navigateur défile vers une autre section de la page.code javascript qui défile vers le haut quand un bouton est cliqué
Quelqu'un peut-il me diriger vers de bons matériaux de lecture pour recréer cet effet? J'utilise jquery, et que vous souhaitez que l'animation soit aussi lisse que est sur hardlycode.com
La commande est
$('html,body').animate({scrollTop : 0},'slow');
Ou, si le lien a la classe scrolltop_btn
$('.scrolltop_btn').click(function() {
$('html,body').animate({scrollTop : 0},'slow');
});
comme un effet de capture, en cas javascript est désactivé, vous devez toujours inclure les ancres HTML standard aussi.
Si vous voulez changer la durée, vous pouvez changer 'slow' au nombre de millisecondes que vous voulez que l'effet dure.
merci, je pense que c'est la meilleure option car elle ne nécessite pas de plugin ou de bibliothèque supplémentaire. .. – stephenmurdoch
Oui, l'utilisation d'un plugin pour que jQuery fasse défiler complique trop ce qui peut déjà être fait en une ou deux lignes. – Kranu
Utilisez le plugin jQuery ScrollTo: http://flesler.blogspot.com/2007/10/jqueryscrollto.html - http://plugins.jquery.com/project/ScrollTo
merci, c'est une animation très lisse, j'aime le fait qu'il peut gérer le mouvement latéral aussi - parfait si vous ciblez les ordinateurs de poche – stephenmurdoch
Voici un blog sur le faire avec jQuery: Improved Animated Scrolling Script for Same-Page Links
Vous pouvez faire défiler tout en haut, mais cette méthode vous permet de pointer vers une section de la page exactement le même que si vous utilisiez #anchors. C'est un bel exemple d'amélioration progressive, car l'effet Javascript sophistiqué s'ajoute à un système non-Javascript déjà complètement fonctionnel.
La page qu'il a liée utilise en fait le premier extrait de ce blog. –
@CD Sanchez: ah, j'ai de bonnes compétences de googling, alors. Le site en question a utilisé ce blog. Soigné! :) – Matchu
merci c'est un article très utile :) – stephenmurdoch
Voici une bonne:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Essayez la démo d'abord:
http://demos.flesler.com/jquery/scrollTo/
Bonne chance!
joli lien, le défilement est assez lisse. J'aime ça. – stephenmurdoch
@stephenmurdoch Je suis content que vous l'ayez aimé! J'espère que cela aide! – Trufa
très simple qui ne nécessite pas de javascript dans la page (il trouve simplement tous les liens qui contiennent un point d'ancrage et les fait défiler à la place): http://www.kryogenix.org/code/browser/smoothscroll/
merci pour le lien. – stephenmurdoch
double possible de [Est-ce que jQuery ont des fonctions pour faire défiler le client le bas du port de vue?] (http://stackoverflow.com/questions/661041/does-jquery-have-any-functions-to-scroll-the-client-to-the-bottom-of-the-view -por) –
duplication possible de [défilement JQuery en haut de page] (http://stackoverflow.com/questions/2275274/jquery-scroll-to-top-of-page) –
Merci à tous ceux qui ont répondu, je suis aller avec la suggestion de @ Kranu, mais les liens que vous avez tous fournis étaient intéressants à lire. – stephenmurdoch