Visualizzazione risultati 1 fino 15 di 15

Discussione: Scroll morbido con jQuery

  1. #1
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito Scroll morbido con jQuery

    In rete ho trovato dei codici jQuery, ma non so come applicarli. In pratica ho questo link che sposta la pagina all'ancora:

    Codice PHP:
    <div class="salta"><a href="#salta">&darrSalta le foto</a></div>
    ...

    <
    a name="salta"></a

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,858

    Predefinito

    Dove sarebbe il jquery da applicare? Dove li hai trovati, di solito ci sono anche esempi sul come utilizzarli...

    Ciao!

  3. #3
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito

    Li ho trovati un po' dappertutto, o che sbaglio io qualcosa.

    CSS

    Codice:
    .torna-su {
    	float: right;
    	display: block !important;
    	border-bottom: 1px solid #e5e6e5;
    	visibility: visible !important;
      }
    Codice:
    <div class="torna-su"><a href="#torna-su">&uarr; Torna su</a></div>
    ...
    <a name="torna-su"></a>

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,858

    Predefinito

    Scusami ma lì non vedo alcun codice jQuery né javascript...

    Ciao!

  5. #5
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito

    L'ho tolto, era tutto incasinato, non so cosa modificare.

  6. #6
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,858

    Predefinito

    Finché non me lo mostri, non ti posso aiutare.

    Ciao!

  7. #7
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito

    Codice:
    <div id="torna-su"><a href="#torna-su">&uarr; Torna su</a></div>
    ...
    <a name="torna-su"></a>
    
    #torna-su {
    	float: right;
    	display: block !important;
    	border-bottom: 1px solid #e5e6e5;
    	visibility: visible !important;
      }

    Codice:
    <script>
    $(function() {
           $('#torna-su').click(function() {
                    //Se clicco sul box torno su (scrollTop:0) con un timing di animazione.
            $('body,html').animate({scrollTop:0},800);
        });//Click
     
    });
    </script>
    Ultima modifica di albenessereblog : 24-11-2017 alle ore 15.43.16

  8. #8
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,858

    Predefinito

    Il jQuery è corretto: quando invocato (al click), fa scrollare la pagina fino l'inizio. Non capisco perché utilizzi le ancore o i riferimenti interni:

    semplicemente fai in questo modo:
    Codice HTML:
    <div id="torna-su"><a href="#">&uarr; Torna su</a></div>
    Senza il secondo <a>. Puoi vederlo qui funzionante.

    (in realtà anche l'altro <a> non è necessario).

    Ciao!

  9. #9
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito

    Qui non funziona, ho creato una pagina in WordPress e ci ho inserito questo.

    Codice HTML:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam
    risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus
    ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum
    malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra.
    
    
    <div id="torna-su"><a href="#">Torna su</a></div>
    
    
    <script>
    $(document).ready(function()
    {
        function ScorriPagina(Posizione, Velocita)
        {
            $(("html,body").animate({scrollTop: Posizione}, Velocita, function(){});
            return false;
        }
        $(("#torna-su").click(function()
        {
        //Lo scroll avverrà per 0 pixel (e cioè posizione da raggiungere) ad una velocità di 1 secondo
            ScorriPagina(0, 1000);
        });
    });
    </script>
    
      }
    CSS
    Codice HTML:
    #torna-su {
    	float: right;
    	display: block !important;
    	border-bottom: 1px solid #ccc;
    	visibility: visible !important;
    Ultima modifica di albenessereblog : 25-11-2017 alle ore 19.19.33

  10. #10
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,858

    Predefinito

    Hai inserito il core jquery?
    Ad esempio così:
    Codice HTML:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    Ciao!

  11. #11
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito

    Non funziona niente nemmeno se clicco la pagina non si sposta

    Codice HTML:
    ...
    
    <div id="torna-su"><a href="#">Torna su</a></div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function()
    {
        function ScorriPagina(Posizione, Velocita)
        {
            $(("html,body").animate({scrollTop: Posizione}, Velocita, function(){});
            return false;
        }
        $(("#torna-su").click(function()
        {
        //Lo scroll avverrà per 0 pixel (e cioè posizione da raggiungere) ad una velocità di 1 secondo
            ScorriPagina(0, 1000);
        });
    });
    </script>

  12. #12
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,858

    Predefinito

    Ci sono errori di parentesi:

    hai aperto una tonda di troppo in
    Codice:
    $(("html,body")
    e in:
    Codice:
    $(("#torna-su")
    Se ancora non ti va, linkami la pagina.

    Ciao!
    Ultima modifica di alemoppo : 25-11-2017 alle ore 20.22.20

  13. #13
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito

    Nel child function.php ho messo questo

    Codice HTML:
    //Fa caricare correttamente jQuery
    function italystrap_add_jquery() {
        wp_enqueue_script('jquery');
    }
    add_action('wp_enqueue_scripts', 'italystrap_add_jquery');
    http://photoman.altervista.org/prova/

  14. #14
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,858

    Predefinito

    Elimina in alto:
    Codice HTML:
    <a name="torna-su"></a>
    Poi, prova a modificare la prima riga così:

    Codice:
    jQuery(function($)
    Purtroppo lo script che hai postato sotto non so bene cosa sia, non conosco wp così approfonditamente.

    Ciao!

  15. #15
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    138

    Predefinito

    RISOLTO!

    Era un conflitto di id.

    In functions.php

    Codice HTML:
    //Fa caricare correttamente varie librerie, script, jQuery, ecc.
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

    Codice HTML:
    <div class="torna-su"><a href="#">&uarr; Torna su</a></div>
    Codice HTML:
    <script>
    jQuery(document).ready(function($)
    {
        function ScorriPaginaSopra(Posizione, Velocita)
        {
            $("html,body").animate({scrollTop: Posizione}, Velocita, function(){});
            return false;
        }
        $(".torna-su").click(function()
        {
        //Lo scroll avverrà per 0 pixel (e cioè posizione da raggiungere) ad una velocità di 1 secondo
            ScorriPaginaSopra(0, 1000);
        });
     }); 
    </script>
    Ultima modifica di albenessereblog : 26-11-2017 alle ore 02.39.06

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •