scorrimento pagina con transizione

**nextpic** · 09-11-2015, 11:40

Ciao a tutti, devo chiedervi una cosa credo per voi banale. Ho questo codice html:

codice:

<ul>
 <li><a href="#voce1">...</a></li>
 <li><a href="#voce2">...</a></li>
 <li><a href="#voce3">...</a></li>
</ul>

<div id="voce1">...</div>
<div id="voce2">...</div>
<div id="voce3">...</div>

Vorrei che quando faccio click su uno dei link #voce1,2 o 3 lo scrolling verticale della pagina verso il basso, avvenga lentamente con un effetto di movimento. Che codice css3 dovrei usare?
Inoltre vorrei che quando le voci del suddetto elenco non sono più visibili nella pagina, venga visualizzato il pulsante che mi possa riportare, in alto nella pagina, dove sono le voci predette.
Come posso fare?
Grazie mille a tutti

**carlomarangoni** · 09-11-2015, 16:28

Scroll lento script javascript

codice:

$(function() {   $('a[href*=#]:not([href=#])').click(function() {     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {       var target = $(this.hash);       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');       if (target.length) {         $('html,body').animate({           scrollTop: target.offset().top         }, 1000);         return false;       }     }   }); });

ritorno inizio pagina:

codice:

<a href="#">Torna su</a>

**nextpic** · 11-11-2015, 11:58

Innanzi tutto grazie per la risposta, il codice javascript postato va inserito nella "head" della pagina html giusto?

Ho inserito il codice js nella head della pagina ma non funziona. Dove sbaglio?

**carlomarangoni** · 11-11-2015, 18:43

Non lo so dove sbagli senza vedere cosa hai fatto, a me funziona
Posta il link alla pagina per poterla vedere

**nextpic** · 11-11-2015, 18:54

Il codice l'ho copiato nel <head> della pagina, ho fatto copia ed incolla

**carlomarangoni** · 12-11-2015, 01:07

Originariamente inviata da nextpic

Il codice l'ho copiato nel <head> della pagina, ho fatto copia ed incolla

Non mi basta sapere questo per capire perchè a te non funziona. Ho bisogno di vedere la pagina o almeno del codice di tutta la pagina

**nextpic** · 12-11-2015, 11:33

Lavoro su un local host e non ho un ip fisso. Uso per questo progetto Drupal e Bootstrap. Ho copiato ed incollato il tuo codice in un file esterno che poi ho importato nella head della pagina.

codice:

        
<head>
...........
<script src="http://miosito.test/sites/all/themes/tuscanytheme/js/funzioni.js?nxntw9">



  // JavaScript Document



  $(function() {

  $('a[href*=#]:not([href=#])').click(function() {

     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

       var target = $(this.hash);

       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

       if (target.length) {

          $('html,body').animate({

              scrollTop: target.offset().top

           }, 1000);

           return false;

       }

     }

   });

  });


</script>
<body>
.....
.....
<div class="main-container" data-thmr="thmr_21">

  <header id="page-header" role="banner">

    <div id="select-home" class="container-fluid">

      <div class="row">

         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-4">

           <a class="animlink text-center" href="#voce1">


         </div>


         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-4">

           <a class="animlink text-center" href="#voce2">


         </div>


         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-4">

           <a class="animlink text-center" href="#voce3">


         </div>


      </div>
    </div>
    ..........
  </header>


</div>




.......
</body>

**KillerWorm** · 12-11-2015, 12:09

Ciao,
per meglio chiarire: tu hai chiesto una soluzione css pensando fosse una cosa banale e dando per scontato che si potesse risolvere in quel modo, ma css ha delle limitazioni che non ti permettono di fare esattamente ciò che hai chiesto. Senza entrare nei dettagli, la strada più facilmente percorribile è quella JavaScript, come appunto ti è stato suggerito da carlomarangoni.

Nello specifico si tratta di uno script jQuery, quindi devi assicurarti che su head ci sia anche l'inclusione di tale libreria e che sia inserita prima di quello stesso script. Se non sai come includere jQuery, ti basta fare una semplice ricerca.

Discussione: scorrimento pagina con transizione

Strumenti discussione

Ricerca discussione

Visualizza

scorrimento pagina con transizione

Permessi di invio