Aiuto js scrollimento verticale morbido

**Gatto Rognoso** · 11-11-2013, 20:42

Ciao a tutti!
Sono nuovo del forum, ho sempre guardato le vostre discussioni con interesse trovando degli spunti interessanti da gente molto più competente di me, ma stavolta non sono riuscito a risolvere il problema dello scrolling verticale "morbido". Premetto che non sono una cima della programmazione web, ma mi sono sempre arrabattato in qualche maniera, percui abbiate pazienza.
In pratica mi sono creato un menù suddiviso su 6 div uno di fianco all'altro e sotto di questo un div contenitore dove inserire un testo linkandolo per capitoli descritti nel menu' stesso. Ora la pagina risulta perfetta, se non fosse che mi sono messo in testa di utilizzare lo scorrimento verticale morbido (o smooth come si chiamano i vari js sul web) per passare da un capitolo all'altro. E' tutto il pomeriggio che provo js vari ma, nella migliore delle opzioni, tali script non hanno effetto o mi scombinano la pagina. E' chiaro che sbaglio qualcosa che ho sotto gli occhi oppure ho fatto incazzare il dio del web (ortomio e bioparco)
Vi lascio qui sotto il codice della pagina.

Grazie in anticipo per le risposte.

<style type="text/css">

body {
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
background-image: url(sfondo.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
font-family: "Familiar Pro";
color: #036638;
overflow:hidden;
}

#contenitore_principale {
width: 1000px;
margin-right: auto;
margin-left: auto;
clear: both;
margin-top: 0px;
}

#corpo {
width: 1000px;
height: 240px;
position: fixed;
z-index: 100;
top: 0px;
}
#top {
height: 20px;
width: 1000px;
float: left;
}

#tweet {
height: 150px;
width: 400px;
background-color: #999;
float: left;
}

#logo {
height: 150px;
width: 600px;
clear: both;
float: left;

}

#menu1 {
height: 40px;
width: 166px;
float: left;
}
#menu2 {
height: 40px;
width: 167px;
float: left;
}

#menu3 {
height: 40px;
width: 167px;
float: left;
}
#menu4 {
height: 40px;
width: 167px;
float: left;
}
#menu5 {
height: 40px;
width: 167px;
float: left;
}
#menu6 {
height: 40px;
width: 166px;
float: left;
}

.mainquadro {
width: 1000px;
height: 600px;
padding: 0px;
margin: 0px;
overflow: hidden;
position: relative;
top: 240px;

.main {
width: 1100px;
height: 600px;
padding: 0px;
margin: 0px;
overflow-x: hidden;
overflow-y: scroll;

}

.maincontenuto {
width: 990px;
padding: 0px;
margin: 0px;
overflow: auto;
}

.TESTO_CENTRATO_MENU {
font-size: 20px;
text-align: center;
line-height: 40px;
}

</style>

<body>
<div id="contenitore_principale">
<div id="corpo">
<div id="top"></div>
<div id="logo"></div>
<div id="tweet">tweet </div>
<div class="TESTO_CENTRATO_MENU" id="menu1"><a href="#section1">HOME</a></div>
<div class="TESTO_CENTRATO_MENU" id="menu2"><a href="#section2">ATTIVITA'</a></div>
<div class="TESTO_CENTRATO_MENU" id="menu3"><a href="#section3">PUBBLICAZIONI</a></div>
<div class="TESTO_CENTRATO_MENU" id="menu4"><a href="#section4">CHI SIAMO</a></div>
<div class="TESTO_CENTRATO_MENU" id="menu5"><a href="#section5">CONTATTI</a></div>
<div class="TESTO_CENTRATO_MENU" id="menu6"><a href="#section6">PARTNERS</a></div>
</div>
<div class="mainquadro">
<div class="main">
<div class="maincontenuto">
<div id="section1">

<h1>home</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</div>

<div id="section2">
<h1>attivita'</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</div>

<div id="section3">
<h1>pubblicazioni</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</div>

<div id="section4">
<h1>chi siamo</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</div>

<div id="section5">
<h1>contatti</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</div>

<div id="section6">
<h1>partners</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

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

</body>

</html>

**Xinod** · 11-11-2013, 21:53

benvenuto, racchiudi sempre il codice almeno in [ code] [ /code] per migliorare la leggibilita'

se ho capito bene e' lo scrollTop di mainquadro che devi animare

codice:

$(function(){
  $('.TESTO_CENTRATO_MENU a').bind('click',function(){
    var scrollTarget=parseInt($($(this).attr('href')).position().top);
    $('.mainquadro').stop(true,false).animate({scrollTop:scrollTarget},1500);
    return false
  })
})

ciao

**Xinod** · 11-11-2013, 21:55

chiaramente si sottintende l' inclusione di jquery prima di questo codice
ciao

**Gatto Rognoso** · 11-11-2013, 23:22

Ciao xinod e grazie per l'aiuto.
Ho provato ad inserire il codice da te suggerito e posto in head ma non mi va, in pratica è come se non ci fosse.

codice:

<script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script>
<script>
$(function(){
  $('.TESTO_CENTRATO_MENU a').bind('click',function(){
    var scrollTarget=parseInt($($(this).attr('href')).position().top);
    $('.mainquadro').stop(true,false).animate({scrollTop:scrollTarget},1500);
    return false
  })
})
</script>

**Xinod** · 11-11-2013, 23:27

guarda la console, accertati che jquery venga effettivamente caricata

con il codice che hai postato prima a me tutto funziona come previsto

**Gatto Rognoso** · 11-11-2013, 23:59

Ho rimesso a posto i link e ho deciso di caricarlo direttamente da web, per non sbagliare.
Nulla non va. Non so dove sbaglio.

p.s. L'ho provato sia su chrome, sia su firefox.

codice:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>


<script type="text/javascript">
$(function(){
  $('.TESTO_CENTRATO_MENU a').bind('click',function(){
    var scrollTarget=parseInt($($(this).attr('href')).position().top);
    $('.mainquadro').stop(true,false).animate({scrollTop:scrollTarget},1500);
    return false
  })
})


</script>

**Gatto Rognoso** · 12-11-2013, 00:02

Ho rimesso a posto i link e ho deciso di caricarlo direttamente da web, per non sbagliare.Nulla non va. Non so dove sbaglio.

p.s. L'ho provato sia su chrome, sia su firefox.

**Gatto Rognoso** · 12-11-2013, 00:04

dimenticavo il codice

codice:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>


<script type="text/javascript">
$(function(){
  $('.TESTO_CENTRATO_MENU a').bind('click',function(){
    var scrollTarget=parseInt($($(this).attr('href')).position().top);
    $('.mainquadro').stop(true,false).animate({scrollTop:scrollTarget},1500);
    return false
  })
})


</script>

**Gatto Rognoso** · 12-11-2013, 00:45

Allora, ho paciugato un pò e sembra funzionare, ma sono sorti dei problemi.
Se carico la pagina e vado per esempio sul link "contatti" funziona perfettamente.
Successivamente pero' se clicco su "pubblicazioni" mi torna sulla home.
Praticamente i link funzionano solo se si parte dalla posizione iniziale, altrimenti creano problemi.

**Xinod** · 12-11-2013, 01:43

errore mio, dopo aver cambiato lo scrolltop non ottieni piu' valori assoluti per il position
var scrollTarget=parseInt($($(this).attr('href')).posi tion().top+$('.mainquadro').scrollTop());

pero' secondo me ci sono altri problemi, prima di tutto a livello di css

Discussione: Aiuto js scrollimento verticale morbido

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto js scrollimento verticale morbido

Permessi di invio