Autoscrolling in pagine dinamiche

**Domenico_Falco1** · 25-05-2019, 21:34

Buona sera

Sto creando un sito con pagine dinamiche usando una funzione ajax, cioè quando clicco su un button questo mi passa il codice contenuto in un'altro file html e così la pagina iniziale si aggiorna senza refresh, la funzione che uso è questa :

<script>
function SetHtmlAjax(id, name){
    $.ajax({
     type: "GET",
     dataType: "html",
     cache: false,
     url: name,
     data: "",
     success: function(msg){
        $('#'+id).html(msg);    

}
     });

}
</script>

e per il button ho questo codice :

codice HTML:

<button class="pulsante1g"  name="PRESENTAZIONE.html" onclick="SetHtmlAjax('container', 'PRESENTAZIONE.html')">Chi Siamo</button>

ho notato che quando clicco sul button la pagina si aggiorna ma essendo il button inserito a metà pagina, la visualizzazione rimane in quel punto, io vorrei che la pagina scorresse verso l'alto dopo essersi aggiornata cliccando sul button.

Teoricamente deve essere inserito un scrollTop nella funzione riportata sopra, c'è qualche sito dove posso leggere come si fa o qualche esempio o qualche vostra spiegazione ?

Grazie come sempre per le vostre risposte.

Saluti

Domenico

**Domenico_Falco1** · 27-05-2019, 11:22

Non piace questa mia domanda ?

**_alka_** · 27-05-2019, 12:55

Originariamente inviato da Domenico_Falco1

Teoricamente deve essere inserito un scrollTop nella funzione riportata sopra, c'è qualche sito dove posso leggere come si fa o qualche esempio o qualche vostra spiegazione ?

Vedi .scrollTop() di JQuery.

**Domenico_Falco1** · 27-05-2019, 17:21

Buon pomeriggio e grazie della risposta, ho letto e poi anche trovato un altro esempio pure illuminante eccolo :

codice HTML:

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

e l'ho provato e funziona benissimo chiaramente...

tornando alla mia necessità, ho questa funzione per lo spostamento di pagine dinamiche

<script>
function SetHtmlAjax(id, name){
    $.ajax({
     type: "GET",
     dataType: "html",
     cache: false,
     url: name,
     data: "",
     success: function(msg){
        $('#'+id).html(msg);    

}
     });

}
</script>

che attivo passando le variabili opportune con questi input :

<input type="image"   name="PRESENTAZIONE.html" src="CHISIAMO.gif" alt="azienda" onclick="SetHtmlAjax('container', 'PRESENTAZIONE.html')"/>

<input type="image"  name="TERRITORI.html" src="TERRITORIONUOVO.gif" alt="azienda" onclick="SetHtmlAjax('container', 'TERRITORI.html')"/>

Non sono bravo in questo linguaggio purtroppo, vorrei che quando clicco sul'immagine a parte la funzione SetHtmlAjax(id, name), si attivasse anche quella dello scroll, ma non so come far passare i parametri ogni volta diversi

Spero di essere stato chiaro e se possibile almeno un esempio.

Grazie.

**Domenico_Falco1** · 10-06-2019, 23:48

Bastava aggiungere il codice :

codice HTML:

window.scrollTo(0, 0);

sotto la riga :

$('#'+id).html(msg);

della funzione :
function SetHtmlAjax(id, name).

Saluti.

Autoscrolling in pagine dinamiche

Strumenti

Potrebbero interessarti anche ...