Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

[Javascript] Smooth scroll

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

[Javascript] Smooth scroll

Postdi gahan » 27/04/09 18:14

Premetto che purtroppo non conosco il linguaggio Javascript, ma lo farò prima o poi.
Quindi, navigando su internet ho trovato alcuni siti dov'è applicato questo script che rende molto accattivante lapagina web.Ho fatto alcune ricerche e ho trovato uno script gia pronto sul sito HTML nella sezione Javascript.Lo script in questione è proprio "smoothscroll.js".
Io però devo applicarlo in un div all'interno del sito, non all'intera pagina, con uno scrolling verticale ...solo che in questo modo non funziona?
Chi mi aiuta? grazie.
words like violence, break the silence
Avatar utente
gahan
Moderatore
 
Post: 1397
Iscritto il: 23/01/08 16:09

Sponsor
 

Re: [Javascript] Smooth scroll

Postdi archimede » 28/04/09 08:39

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

Re: [Javascript] Smooth scroll

Postdi gahan » 29/04/09 11:37

Sono riuscito a far funzionare lo scroll animato nel div che mi interessava ma ha un comportamento anomalo.
Il codice è il seguente:

Codice: Seleziona tutto
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('a[href^=#]:not([href=#])').click(function(e){
        $('div#serv').animate({
                 scrollTop: $($(this).attr("href"))
                 .offset().top }, 2000);
          e.preventDefault();

    });
});
</script>


Adesso, io nel div#serv ho creato diverse "ancore" collegate tramite <a id="xxx">-----</a> <a href="#xxx"></a>

solo che lo scroll si comporta in maniera errata, cioè per esempio cliccando sulla prima ancora non mi porta al rispettivo collegamento.

Qualche consiglio?
Avatar utente
gahan
Moderatore
 
Post: 1397
Iscritto il: 23/01/08 16:09

Re: [Javascript] Smooth scroll

Postdi archimede » 05/05/09 14:18

Bisognerebbe vedere una pagina di esempio completa credo.

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

Re: [Javascript] Smooth scroll

Postdi gahan » 06/05/09 09:13

questi sono i codici:

HTML
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prova</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('a[href^=#]:not([href=#])').click(function(e){
        $('div#serv').animate({
                 scrollTop: $($(this).attr("href"))
                 .offset().top }, 3000);
          e.preventDefault();

    });
});
</script>


</head>
<body>

<div id ="container">


<div id="content">

      <div id="menu">
            <a class="menu" href="index.html">HOME</a>
            <a class="menu" href="azienda.html">AZIENDA</a>
            <a class="menu" id="current" href="#">SERVIZI</a>
            <a class="menu" href="contatti.html">CONTATTI</a>
            <a class="menu" href="photogallery.html">PHOTOGALLERY</a>
      </div>


  <div id="box">
     <div id="serv">   

      <div id="top"></div>
      <a href="#1"><img src="img/servizi/0b.png"></a>
      <a href="#2"><img src="img/servizi/1b.png"></a>
      <a href="#3"><img src="img/servizi/2b.png"></a>
      <a href="#4"><img src="img/servizi/3b.png"></a>
      <a href="#5"><img src="img/servizi/4b.png"></a>
      <a href="#6"><img src="img/servizi/5b.png"></a>

<div id="1">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/1.jpg" align="left"></a>

</div>
</div>

<div id="2">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/2.jpg" align="left"></a>

</div>
</div>

<div id="3">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/3.jpg" align="left"></a>

</div>
</div>

<div id="4">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/4.jpg" align="left"></a>

</div>
</div>

<div id="5">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/5.jpg" align="left"></a>
<
</div>
</div>

<div id="6">
<div id="nser">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/6.jpg" align="left"></a>

</div>
</div>

 
     </div>
   </div>
</div>
       

<div id="navigation">

      <div id="bal">

          <ul id="gallery">
              <li><a href="#nogo"> <img src="photo/1.jpg" alt="#1" title="#1"></a></li>
              <li><a href="#nogo"> <img src="photo/2.jpg" alt="#2" title="#2"></a></li>
              <li><a href="#nogo"> <img src="photo/3.jpg" alt="#3" title="#3"></a></li>
              <li><a href="#nogo"> <img src="photo/4.jpg" alt="#4" title="#4"></a></li>
              <li><a href="#nogo"> <img src="photo/5.jpg" alt="#5" title="#5"></a></li>
              <li><a href="#nogo"> <img src="photo/6.jpg" alt="#6" title="#6"></a></li>
              <li><a href="#nogo"> <img src="photo/7.jpg" alt="#7" title="#7"></a></li>
              <li><a href="#nogo"> <img src="photo/8.jpg" alt="#8" title="#8"></a></li>
          </ul>
       </div>
       </div>
     
</div>
</div>
<div id="footer">

</div>
</body>
</html>


CSS
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prova</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('a[href^=#]:not([href=#])').click(function(e){
        $('div#serv').animate({
                 scrollTop: $($(this).attr("href"))
                 .offset().top }, 3000);
          e.preventDefault();

    });
});
</script>


</head>
<body>

<div id ="container">


<div id="content">

      <div id="menu">
            <a class="menu" href="index.html">HOME</a>
            <a class="menu" href="azienda.html">AZIENDA</a>
            <a class="menu" id="current" href="#">SERVIZI</a>
            <a class="menu" href="contatti.html">CONTATTI</a>
            <a class="menu" href="photogallery.html">PHOTOGALLERY</a>
      </div>


  <div id="box">
     <div id="serv">   

      <div id="top"></div>
      <a href="#1"><img src="img/servizi/0b.png"></a>
      <a href="#2"><img src="img/servizi/1b.png"></a>
      <a href="#3"><img src="img/servizi/2b.png"></a>
      <a href="#4"><img src="img/servizi/3b.png"></a>
      <a href="#5"><img src="img/servizi/4b.png"></a>
      <a href="#6"><img src="img/servizi/5b.png"></a>

<div id="1">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/1.jpg" align="left"></a>

</div>
</div>

<div id="2">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/2.jpg" align="left"></a>

</div>
</div>

<div id="3">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/3.jpg" align="left"></a>

</div>
</div>

<div id="4">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/4.jpg" align="left"></a>

</div>
</div>

<div id="5">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/5.jpg" align="left"></a>
<
</div>
</div>

<div id="6">
<div id="nser">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/6.jpg" align="left"></a>

</div>
</div>

 
     </div>
   </div>
</div>
       

<div id="navigation">

      <div id="bal">

          <ul id="gallery">
              <li><a href="#nogo"> <img src="photo/1.jpg" alt="#1" title="#1"></a></li>
              <li><a href="#nogo"> <img src="photo/2.jpg" alt="#2" title="#2"></a></li>
              <li><a href="#nogo"> <img src="photo/3.jpg" alt="#3" title="#3"></a></li>
              <li><a href="#nogo"> <img src="photo/4.jpg" alt="#4" title="#4"></a></li>
              <li><a href="#nogo"> <img src="photo/5.jpg" alt="#5" title="#5"></a></li>
              <li><a href="#nogo"> <img src="photo/6.jpg" alt="#6" title="#6"></a></li>
              <li><a href="#nogo"> <img src="photo/7.jpg" alt="#7" title="#7"></a></li>
              <li><a href="#nogo"> <img src="photo/8.jpg" alt="#8" title="#8"></a></li>
          </ul>
       </div>
       </div>
     
</div>
</div>
<div id="footer">

</div>
</body>
</html>


poi occorre anche lo script jquery che carico nel codice HTML scaricabile da QUI: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js
words like violence, break the silence
Avatar utente
gahan
Moderatore
 
Post: 1397
Iscritto il: 23/01/08 16:09

Re: [Javascript] Smooth scroll

Postdi gahan » 06/05/09 09:15

Scusate ho copiato 2 volte il codice HTML:

CSS

Codice: Seleziona tutto
body{margin:0 auto;padding:0;background:#fff;text-align:center;font-family:verdana,arial,sans-serif;font-size:11px;
background-attachment:fixed;background-color:#fff;}
h5{color:#005D2A;}


div#container{position:relative;width:806px;height:600px; margin:0 auto; background:url(img/1.jpg) no-repeat;}
div#navigation {position:absolute;text-align:center;left:-5px; top:-1px; width:280px;padding:0;}
div#content {position:absolute;height:auto;text-align:center;left:32px;top:0; padding:0; margin-left:263px;}
div#footer{bottom:0;width:798px;margin:0 auto;height:30px;background:#fff;}



div#bal{margin:265px auto 0;width:202px;padding:7px 8px;border:1px solid #fff;}
div#box{position:absolute;width:470px;height:255px;padding:8px 0 5px 8px;border:1px solid #fff;margin:278px 0 0 0;text-align:justify;}
div#az{background:#fff;position:absolute;width:454px;padding:8px 0 6px 8px;height:238px;}
div#desc{width:179px;padding:0 0 0 0;text-align:justify;margin:-215px 0 0 247px;}
div#serv{position:absolute;width:462px;padding:0 0 0 0;text-align:left;overflow:auto;height:252px;}
div#serv img{border:0; margin:0 8px 8px 0;}
div#nser{position:relative;background:#fff;width:420px;border:1px solid #fff;padding:9px 12px 0 10px;height:241px;text-align:justify;}
div#nserv img{position:relative;margin:0 12px 0 0;}
.space{margin:40px 0 40px 0;}
div#dser{width:204px;float:left;margin:0 0 0 5px;}
div#puls{position:absolute;top:228px;left:347px;}



#gallery {padding:0;margin:0 auto; list-style-type:none; overflow:hidden; width:200px; height:266px; border:1px solid #fff;
background:#fff url(photo/sfondo.jpg) no-repeat;}
#gallery li {float:left;}
#gallery li a {display:block; height:5px;width:200px;overflow:hidden;float:left; text-decoration:none; border-bottom:1px solid #fff;cursor:default;}
#gallery li a img {border:0;}
#gallery li a:hover {background:#eee; height:200px;}



div#menu {font-size: 10px;font-family: arial,verdana,sans-serif;letter-spacing:2px;position:absolute;margin:263px 0 0 4px;width:470px;text-align:center;padding:1px;}
a.menu {text-align:center;background:transparent;color: #005D2A;text-decoration: None;width: 100px;padding: 1px 6px 2px 7px;margin:0 5px;}
a:hover.menu {background-color: #fff;color: #005D2A;text-decoration: None;width: 100px;padding: 1px 6px 1px 7px;}
div#menu a#current{background-color: #fff;color:#005D2A;text-decoration: None;width: 100px;padding: 1px 6px 1px 7px;}

@media screen {body>div#navigation { position: fixed;}}

words like violence, break the silence
Avatar utente
gahan
Moderatore
 
Post: 1397
Iscritto il: 23/01/08 16:09

Re: [Javascript] Smooth scroll

Postdi archimede » 06/05/09 09:56

Il tuo codice HTML contiene non pochi errori: vai qui per i dettagli da sistemare. Già che ci sei, valida anche il CSS (io non l'ho fatto).

HTH.

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

Re: [Javascript] Smooth scroll

Postdi gahan » 06/05/09 11:12

grazie, il CSS è a posto, mentre per quanto riguardal'HTML ho sistemato quasi tutti gli errori tranne che per alcuni dove ad essere sincero non capisco dov'è il problema.

Comunque lo scroll animato si comporta molto stranamente:

Ho sei link (che poi sarebbero i servizi) che corrispondono alle "ancore". Cliccando sul primo link mi porta sulla seconda ancora, il secondo link sulla terza ancora e cosi via.Di conseguenza sia il 5° che 6° link portano entrambi sulla sesta ancora.
words like violence, break the silence
Avatar utente
gahan
Moderatore
 
Post: 1397
Iscritto il: 23/01/08 16:09


Torna a Programmazione


Topic correlati a "[Javascript] Smooth scroll":

Javascript
Autore: Stecco
Forum: Discussioni
Risposte: 2
Tabella in JavaScript
Autore: Ciozun
Forum: Programmazione
Risposte: 0

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti