Aiuto per scroll div

beach

Nuovo Utente
16 Ott 2012
2
0
0
Vorrei far scrollare un div in svariati punti, proprio come un'ancora, però vorrei che il tutto funzionasse in movimento. Ho manipolato questo script ma mi sbaglia a calcolare l'offset credo.
http://jsfiddle.net/ahMW2/1/

Dove sbaglio? Grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
ti propongo un alternativa, lo script che hai postato non mi piace :cool:
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Scroll</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style type="text/css">
            div#container {
                clear: both;
                width: 200px;
                height: 220px;
                overflow: hidden;
                border:1px solid black;
                text-align: justify;
                padding:0 15px;
            }
            ul {
                margin:0;
                padding:0;
                list-style-type: none;
            }
            ul li {
                float:left;
                margin:0 10px;
                cursor:pointer
            }
        </style>

    </head>
    <body>
        <ul>
            <li class="uno">uno</li>
            <li class="due">due</li>
            <li class="tre">tre</li>
            <li class="quattro">quattro</li>
        </ul>
        <script type="text/javascript">
            var h=0;
            $("ul li").click(function(){ 
                h=0;                
                calcolaAltezza($(this).attr("class"));        
                $("div#scroll").animate({
                    "margin-top": "-" + h + "px"
                },1000); 
            });
            
            function calcolaAltezza(elemento) {                
               
                $("div#scroll div").each(function() {              
                    if($(this).attr("class") == elemento) {
                        return false;
                    }else{
                        h += $(this).height();
                    }                        
                });
            }
        </script>
        <div id="container">
            <div id="scroll">
                <div class="uno">
                    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <div class="due">
                    2. Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui
                    officia deserunt mollit anim id est laborum.
                </div>
                <div class="tre">
                    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <div class="quattro">
                    4. Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecat cupidatat non proident, sunt in culpa qui
                    officia deserunt mollit anim id est laborum.
                </div>
            </div>
        </div>
    </body>
</html>
Naturalmente è da personalizzare e da ottimizzare: è solo una bozza
Non sono arrivato a commentare se hai bisogno chiedi pure
 

beach

Nuovo Utente
16 Ott 2012
2
0
0
Gli ho dato un'occhiata veloce e funziona perfettamente come puoi vedere http://jsfiddle.net/AeB7b/ ho solo modificato il float perchè a me serve in verticale, ti ringrazio moltissimo, stasera me lo personalizzo. Però mi rimane il dubbio su perchè il mio non funzionava ;).
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Però mi rimane il dubbio su perchè il mio non funzionava .
la posizione degli elementi h1 cambia ad ogni click che fai
ho provato a settarla per ogni elemento a pagina caricata e devo dire che scrolla un po meglio
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Scroll</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style type="text/css">
            #scroll {
                height: 220px;
                width: 200px;
                overflow: auto;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="javascript:void(0)" onClick="goToByScroll(1)">1</a></li>
            <li><a href="javascript:void(0)" onClick="goToByScroll(2)">2</a></li>
            <li><a href="javascript:void(0)" onClick="goToByScroll(3)">3</a></li>
            <li><a href="javascript:void(0)" onClick="goToByScroll(4)">4</a></li>
        </ul>
        <div id="scroll">
            <h1 id="1">1</h1>
            1. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <h1 id="2">2</h1>
            2. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <h1 id="3">3</h1>
            3. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <h1 id="4">4</h1>
            4. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <script type="text/javascript">
            
            var pos = new Array();
            pos[1] = $("#1").position().top;
            pos[2] = $("#2").position().top;
            pos[3] = $("#3").position().top;
            pos[4] = $("#4").position().top;           
                
            function goToByScroll(id) {
                
                $('#scroll').animate({
                    "scrollTop": pos[id]
                }, 'slow');
            }
        </script>
    </body>
</html>
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
E Aiuto per query PHP 8
I aiuto urgente per thunderbird Posta Elettronica 0
I aiuto per outlook Posta Elettronica 0
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
M Fullcalendar in Codeigniter, un aiuto per la chiamata $ajax ? jQuery 0
P Aiuto per rendere un Bot Telegram Privato PHP 1
A Aiuto per pagina php PHP 0
T cercasi aiuto per file d1 (open-edge db) Database 0
L Aiuto per programma web php/mySQL PHP 2
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
T Aiuto per php7 e mysqli PHP 3
T mysql tutorial per importare tabelle access in mysql aiuto MySQL 2
wildcity9 aiuto per sbloccare account instagram bannati Social Media Marketing 0
A Aiuto per configurare il banner di Iubenda su un sito in html HTML e CSS 0
S [PHP] Aiuto creazione form php per completamento modello word PHP 1
Z [HTML] aiuto per visualizzazione su tablet Offerte e Richieste di Lavoro e/o Collaborazione 6
W [PHP] Un aiuto per il mio primo "Multithread" PHP 0
G Vuoi fare successo? Abbiamo bisogno di aiuto per un app! Offerte e Richieste di Lavoro e/o Collaborazione 1
K [javascript] Aiuto per programma subnetting Javascript 0
F ciao, sono ferro e ho bisogno di aiuto per problemi con la mail di alice.it Presentati al Forum 1
L [PHP] aiuto per installazione mrbs PHP 0
1 Aiuto per nuovo sito SEO e Posizionamento 4
K Server per sito di annunci: aiuto nella scelta Hosting 4
P [Javascript] Aiuto per recupero variabili da script Javascript 10
P [PHP] Aiuto per gestione file CSV PHP 24
A scambio lavoro per aiuto con android Sviluppo app per Android 0
A aiuto per un codice... PHP 1
ecosito Aiuto con la traduzione in italiano per capire come installare questo JavaScript jQuery 0
StelladelSud Cerco aiuto per una demo Offerte e Richieste di Lavoro e/o Collaborazione 3
G Piccolo aiuto per php mail PHP 2
G aiuto per semplice menu onclick HTML e CSS 6
F aiuto per funzionamento sito responsive e form contatti HTML e CSS 29
A AIUTO per impostazione doppia cifra in tabella HTML e CSS 6
G Passaggio variabili tra pagine- Aiuto per maturità 2015 PHP 3
G Passaggio variabili tra pagine- Aiuto per maturità 2015 PHP 0
A Aiuto per Flash player Flash 0
J Aiuto per localstorage con jquery/js/json Javascript 4
M Cerco aiuto per una modifica di un codice Javascript 2
A Aiuto per ordine cronologico lista file all'interno di una cartella protetta PHP 2
G Aiuto! Studente cerca aiuto per un codice PHP PHP 1
S Aiuto per 2 codifiche java Java 4
G Aiuto per creare chat stile Facebook Javascript 7
Sevenjeak Aiuto e consigli su adattamento sito per dispositivi mobile HTML e CSS 2
S aiuto per script PHP/OOP PHP 2
J Aiuto per un sitema di upload per un progetto PHP 0
K Aiuto per sito Discussioni Varie 0
D Richiesta aiuto siti per indirizzamento forum HTML e CSS 1
M Aiuto per una libreria per generare grafici PHP 1
B Saluti ed aiuto per pagina web html HTML e CSS 11
I Aiuto per modificare gruppo buddypress WordPress 0

Discussioni simili