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:

<div class="salta"><a href="#salta">&darr; Salta le foto</a></div>
...

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

[alemoppo]

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

.torna-su {
	float: right;
	display: block !important;
	border-bottom: 1px solid #e5e6e5;
	visibility: visible !important;
  }

<div class="torna-su"><a href="#torna-su">&uarr; Torna su</a></div>
...
<a name="torna-su"></a>

[alemoppo]

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

Ciao!

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

[alemoppo]

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

Ciao!

<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;
  }

<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>

[alemoppo]

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:

<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.

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

#torna-su {
	float: right;
	display: block !important;
	border-bottom: 1px solid #ccc;
	visibility: visible !important;

[alemoppo]

Hai inserito il core jquery?
Ad esempio così:

<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

...

<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>

[alemoppo]

Ci sono errori di parentesi:

hai aperto una tonda di troppo in

$(("html,body")

e in:

$(("#torna-su")

Se ancora non ti va, linkami la pagina.

Ciao!

Nel child function.php ho messo questo

//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/

[alemoppo]

Elimina in alto:

<a name="torna-su"></a>

Poi, prova a modificare la prima riga così:

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

//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.

<div class="torna-su"><a href="#">&uarr; Torna su</a></div>

<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>