Aiuto per scroll div

beach · 16 Ott 2012

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 · 17 Ott 2012

Ciao,
ti propongo un alternativa, lo script che hai postato non mi piace

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 · 17 Ott 2012

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 · 17 Ott 2012

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>

alessandro1997 · 17 Ott 2012

criric ha scritto:
lo script che hai postato non mi piace

Che insensibile... Queste sono cose che si pensano ma non si dicono. :evil:

Cerca

Cerca

Aiuto per scroll div

beach

Nuovo Utente

criric

Super Moderatore

beach

Nuovo Utente

criric

Super Moderatore

alessandro1997

Utente Attivo

Discussioni simili