Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - remonter en haut de page par un click
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

remonter en haut de page par un click

 Répondre Répondre
Auteur
Message
nico38 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Jan 18 2014
Status: Inactif
Points: 3921
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Sujet: remonter en haut de page par un click
    Envoyé : Apr 19 2015 à 1:04pm
Utilisation : un bouton haut de page qui apparaît dans un coin de la page quand l'utilisateur descend de la page et clique sur ce bouton pour remonter

A mettre sur un calque qui est présent dans toutes les pages du site ça va plus vite, sinon mettre sur chaque page

1. glisser déposer : bloc de code source (javascript, end body)
2. copier/coller dedans ce code :
/*début top-page*/
$(function(){
  $('.scrollup').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });
 
 $(window).scroll(function(){
    if ($(window).scrollTop() < 250){  /*définir à partir de quelle hauteur le bouton apparaît*/
        $('.scrollup').stop().animate({'opacity':0},function(){
           $(this).hide();
         });
    } else {
        $('.scrollup').stop().show().animate({'opacity':1});
    }
});
});
/*FIN TOP PAGE*/


4. Mettre un cadre avec classe personnalisée : scrollup
 - distance bas et droite : 50px (par exemple) et supprimer alors les distace haut et gauche
 - largeur 40, hauteur 40 (exemple)
 - mettre une image d'arrière plan

5. mettre bloc de code source : CSS/header
.scrollup {
    position: fixed !important;
    display: none;
 }


c'est tout. (après il y a plein de chose qu'on peut modifier c'est une base)
______________________________________________________________________________
______________________________________________________________________________

Pour un retour en haut de page en cliquant sur un élément de la page :
1. glisser déposer : bloc de code source (javascript, end body)
2. copier/coller dedans ce code :
/*début top-page*/
$(function(){
  $('.scrollup').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });
3. classe personnalisée scrollup à l'élément déclencheur




Edité par nico38 - Apr 19 2015 à 7:16pm
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5382
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 19 2015 à 1:23pm
Ou juste :
/*clic vers top*/
$("#ClickVersHaut").click(function(){
    $('html, body').animate({
        scrollTop: 0
    });
});


en remplaçant dans le code ClickVersHaut par l'ID de l'élément que vous voulez utiliser pour remonter en haut de page (image, texte, cadre, etc.)
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne