28173 sujets

CSS et mise en forme, CSS3

Bonjour !
Comme le titre l'indique, j'ai un petit problème avec ma flèche back to top. Elle est tout le temps visible même quand je suis en haut de la page.
J'aimerais régler ce problème pour qu'elle puisse être visible que quand on scroll la page.
Si vous savez comment corriger ça, je suis preneur !

Je vous donne le lien de mon site : Cliquez ici !

Merci ! Smiley smile
Modérateur
Salut,

Il faut lui donner un style display:none; ou équivalent qui la fera disparaître de base.
Ensuite il te faudra un petit code Js qui détectera le scroll et qui appliquera une autre classe CSS faisant apparaître ta flèche si tu est à X pixel tu haut de ta page.
Merci de ton aide, nous allons faire autrement car c'est trop compliqué pour moi ahah ! Smiley smile
Modérateur
c'est vraiment pas dur à faire hein ! Surtout si tu as déjà Jquery. Mais effectivement faut toucher un peu au code... normal Smiley smile
Voici un exemple en jQuery dans son ensemble, à adapter selon vos besoins :
// -----------------------------------------------------------------------------
// @section     Scroll top
// @description Défilement vers le haut
// -----------------------------------------------------------------------------

// @note Vanilla Js de 'scrollTop: 0' : 'window.scrollTo( 0, 0 )'

( function( $ ) {
	$( 'body > footer' ).append( '<a href="" class="scroll-top"><svg xmlns="http://www.w3.org/2000/svg"><path d="M20 32v-16l6 6 6-6-16-16-16 16 6 6 6-6v16z"/></svg></a>' ); // Création de l'élément 'a.scroll-top'
	var scrolltop = $( '.scroll-top' ); // Création de la variable uniquement après création de l'élément dans le DOM
	scrolltop.on( 'click', function() {
		$( 'html, body' ).animate( {scrollTop: 0}, 600 ); // Retour en haut progressif
		return false; // Empêche la génération de l'ancre sur le permalien
	} );
	$( window ).scroll( function() { // Apparition de la flèche 'retour en haut' au scroll de la page
		if ( $( this ).scrollTop() > 100 ) {
			scrolltop.fadeIn();
		} else {
			scrolltop.fadeOut();
		}
	} );
} )( jQuery );


Vous aurez un aperçu en live ici : Scriptura framework
Modifié par Olivier C (08 Jul 2016 - 08:41)