Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

SmoothScroll_JS

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

SmoothScroll_JS

Postdi lucaeffe » 29/10/09 12:12

Ho installato lo script e funziona perfettamente ma mi chiedevo se esiste un modo per decidere in che punto far fermare lo script che scende.

Nel mio caso gli script partono tutti da delle voci di menu e vanno a finire a delle gallerie e vorrei che si fermassero tutti nello stesso punto.

Spero di essere stato abbastanza chiaro e preciso!
Grazie a tutti!!

Questo è lo script

http://javascript.html.it/articoli/legg ... g-morbido/


Questo è il codice HTML

Codice: Seleziona tutto
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="PORTFOLIO.css" rel="stylesheet" type="text/css" />

<title>Lucaeffe.it</title>

<script src="smoothscroll_dl/smoothscroll.js" type="text/javascript"></script>


[...]


<!-- jQuery lightBox plugin -->
<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>


<link rel="stylesheet" type="text/css" href="JS/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<!--fine jQuery lightBox plugin -->




<!-- inizio jQuery w.slide plugin -->
<script src="JS/jquery-lightbox-0.5/jquery/jquery.wslide.js"type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$("#parent2").wslide({
width: 750,
height: 250,
fade: true,
duration: 2000
});
});

</script>



<script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#slider").easySlider({
prevText: 'Previous Slide',
prevId: 'prevBtn',
nextText: 'Next Slide',
nextId: 'nextBtn',
orientation: 'horizontal'




});

$("#slider2").easySlider({
prevText: 'Previous Slide',
prevId: 'prevBtn2',
nextText: 'Next Slide',
nextId: 'nextBtn2',

});



$("#slider3").easySlider({
prevText: 'Previous Slide',
prevId: 'prevBut2',
nextText: 'Next Slide',
nextId: 'nextBut2',

});
});

</script>











<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery{
margin:250px 0 0 0;
width:100%;
height:3000px;
text-decoration:none
}

#gallery a{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}

#gallery ul {
list-style: none;
padding:100px 0 0 50px;
margin:0 0 50px 0
}
#gallery ul li {
display: inline;
}
#gallery ul img {
margin:0 auto;
border: 5px solid #3e3e3e;
border-width:0;
}
#gallery ul a:hover img {
border: 1px solid none;
border-width:0;
color: #fff;
}
#gallery ul a:hover { color: #fff;
}

</style>

<!-- inizio jQuery w.slide gallery -->
<style type="text/css" media="screen">


#parent2-menu{
text-decoration:none;

}
#parent2-menu li{
padding:30px 0 0 75px;
margin:0 auto;

}

#parent2 li{
margin:0;
padding: 20px 0 0 70px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:12px;
}

#parent2-menu a{
text-decoration:none;
font:Arial, Helvetica, sans-serif;
color:#000;
}
#parent2-menu a:hover, #parent2-menu a.wactive{
text-decoration:none;
background: black;
color:#000;}
</style>



</head>







<body>
<a name="top"></a>


<div id="sfondo_fisso"></div>

<div id="container">

<div id="header">

<ul id="menu">
<li><a href="#p1"><strong>illustraction</strong></a></li>
<li><a href="#p2"><strong>web</strong></a></li>
<li><a href="#p3"><strong>logo</strong></a></li>
<li><a href="#p4"><strong>advertising</strong></a></li>
</ul>

<div id="barra_luminosa_centro"></div>
</div>


<div id="header2">
<ul class="welcome">
<li><a href="#parent2-1"><strong>Welcome</strong></a></li>
<li><a href="#parent2-2"><strong>About me</strong></a></li>
<li><a href="#parent2-3"><strong>Services</strong></a></li>
<li><a href="#p5"><strong>Contact</strong></a></li>
</ul>




<!-- testi per il w.slide-->

<ul id="parent2">
<li>
<h1><img src="Nuova cartella/image/welcometext.png" width="700" height="50" /></h1>
<strong>Ciao,sono Luca Faedda grafico,illustratore e web-designer.Attualmente vivo a Firenze.
Appassionato al mondo dell'illustrazione, graphic-design, grafica pubblicitaria e della programmzione di siti web e web-design.
L'obiettivo è quello di creare siti accessibili e dal design efficace con l'utilizzo di xHTML,CSS,JavaScript e Flash
con particolare attenzione agli standard dettati dalla W3C e al “cross-browser”; </strong></li>

<li><h1><strong><img src="Nuova cartella/image/aboutmetext.png" width="680" height="60" /></strong></h1>
<strong> Diplomato all'istituto Statale d'arte I.S.A.F.F. di sassari,
frequento ora l'Accademia delle arti digitali<span class="wait"><a href="http://www.scuolanemo.com/index.php?menu=6&amp;umenu=FAQ's&amp;page=FAQ's&am p;pagina=">NEMO NT.</a></span></strong></li>

<li><h1><img src="Nuova cartella/image/services.png" width="530" height="60" /></h1>
<strong>
Web design, realizzazione siti internet, xHtml, Css. Dal design allo sviluppo per il tuo sito sino
all'ottimizazzione sui motori di ricerca.

Illustrazioni su commissione,caricature,grafiche per t-shirt, skate, tavole da surf personalizzate.
Loghi, Brochure, volantini, business card per migliorare la tua immagine.

</li>
</ul>
</div>
<!-- fine testi per il w.slide-->



<!--inizio galleria -->
<div id="gallery">
<a name="p1"><div id="illustraction"><img src="Nuova cartella/image/illustractio.png" width="900" height="150" /></div><h2><a href="#top">^</a></h2></a><!-- ILLUSTRAZIONI -->



<div id="slider">
<ul>

<li>

<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" />
</a>
</li>


<li> <a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" />
</a>

</li>




</ul>

</div>



<a name="p2"><div id="advertising"><img src="Nuova cartella/image/WEB.png" width="900" height="170" /></div><h2><a href="#top">^</a></h2></a> <!-- WEB TEMPLATES -->

<div id="slider2">
<ul>
<li>
<a href="JS/jquery-lightbox-0.5/photos/image17.jpg" title="Vincenzo Corda HairStylist">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image17.png" width="430" height="280" alt="" /> </a>
<img src="JS/jquery-lightbox-0.5/photos/web_comm.png" width="335" height="280" />
</li>


<li>
<a href="JS/jquery-lightbox-0.5/photos/image22.jpg" title="Polliceverde.it">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image22.png" width="430" height="280" alt="" /> </a>
<img src="JS/jquery-lightbox-0.5/photos/web_comm2.png" width="335" height="280" />
</li>
</ul>



</div>



<a name="p3"><div id="advertising"><img src="Nuova cartella/image/logos.png" width="900" height="152" /></div><h2><a href="#top">^</a></h2></a><!-- LOGO -->




<ul>
<li>
<a href="JS/jquery-lightbox-0.5/photos/image18.jpg" title="contest 'lovely crociere' grafici creativi.it">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image18.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image19.jpg" title="Nemoland-dietro le quinte della fantascienza e del fantasy">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image19.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image20.jpg" title="lucaeffe logo">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image20.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image23.jpg" title="NEMO NT - Colori puri">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image23.png" width="200" height="140" alt="" />
</a>

<img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
</a>

<img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
</a>

<img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
</a>

<img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
</a>
</li>
</ul>



<a name="p4"><div id="advertising"><img src="Nuova cartella/image/advertising.png" width="915" height="150" /></div><h2><a href="#top">^</a></h2></a><!-- ADVERTISING -->

<ul>
<li>
<a href="JS/jquery-lightbox-0.5/photos/image9.jpg" title="esercizi di sintesi - China">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image9.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image10.jpg" title="esercizi di sintesi - Musica">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image10.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image11.jpg" title="esercizi di sintesi - Mare">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image11.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image12.jpg" title="esercizi di sintesi - Estate">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image12.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image13.jpg" title="esercizi - Carattere come immagine">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image13.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image14.jpg" title="esercizi di reinterpretazione - Pin up '50">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image14.png" width="200" height="140" alt="" />
</a>

<a href="JS/jquery-lightbox-0.5/photos/image15.jpg" title="esercizi di reinterpretazione - Pop Art">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image15.png" width="200" height="140" alt="" />
</a>


<a href="JS/jquery-lightbox-0.5/photos/image16.jpg" title="contest 'No al Fumo' Grafici creativi.it">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image16.png" width="200" height="140" alt="" />
</a>
</li>
</ul>



</div>

<div id="contact_me"></div>

<div id="modulo"><form id="contact" method="post" action="">
<div>
<label for="email"></label>
<div class="input-cont"><input type="text" id="email" name="email"></div>

<label for="nome"></label>
<div class="input-cont"><input type="text" id="nome" name="nome" size="20"></div>

<label for="message"></label>
<div class="input-cont"><input type="text" id="object" name="object"></div>

<label for="message"></label>
<div class="textarea-cont">
<textarea id="message" name="message" rows=9 cols=20></textarea>
</div>
<button type="submit" id="go" value="invia">CLICK HERE TO E-MAIL ME</button>
</div>
</form> </div>

<a name="p5"></a>

</div>
</body>
lucaeffe
Utente Junior
 
Post: 42
Iscritto il: 29/10/09 12:08

Sponsor
 

Re: SmoothScroll_JS

Postdi archimede » 29/10/09 15:09

Che significa vorrei che si fermassero tutti nello stesso punto?

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: SmoothScroll_JS

Postdi lucaeffe » 30/10/09 11:52

Posto in allegato un immagine per spiegarmi al meglio.

L'intero rettangolo grigio è la pagina intera del mio sito lungo circa 900px.
Gli spazi tra le due linee rosse rappresentano ciò che viene visto nello schermo.

Dalle voci del menù vorrei che lo smooth scroll facesse fermare lo scroll per tutti e quattro gli spazi
nello stesso punto per ogni spazio in modo che la pagina sia centrata allo stesso modo per tutti e
quattri gli spazi rossi.

Questo succede solo per il primo spazio e l'ultimo mentre per gli altri due no.
Per questo motivo vorrei che lo scroll si fermasse nello stesso punto per ogni spazio.

Sper di essermi spiegato.
Grazie

Luca





Immagine
lucaeffe
Utente Junior
 
Post: 42
Iscritto il: 29/10/09 12:08

Re: SmoothScroll_JS

Postdi archimede » 30/10/09 13:46

Non credo tu possa controllare come il browser fa scorrere la pagina.

Al limite puoi aggiungere dello spazio bianco in fondo per allungarla artificialmente e ottenere, se ho capito bene, qualcosa di simile a quel che desideri.

HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Re: SmoothScroll_JS

Postdi lucaeffe » 30/10/09 16:27

Si appunto,ho risolto comunque posizionando le ancore p in "punti strategici"!!
Grazie lo stesso!! ;)
lucaeffe
Utente Junior
 
Post: 42
Iscritto il: 29/10/09 12:08


Torna a Programmazione


Topic correlati a "SmoothScroll_JS":


Chi c’è in linea

Visitano il forum: Nessuno e 7 ospiti