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">&darr; Salta le foto</a></div>
...

<a name="salta"></a>


---

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

Ciao!

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>

---

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

Ciao!

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

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

Ciao!

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>

---

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!

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;

---

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!

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>

---

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!

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/

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!

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>

---