jQuery scroll verticale morbido della pagina non funziona

10-11-2014, 16.30.31

Lo scroll morbido non funziona, premetto che uso html5

Codice HTML:

<a href="#segnalibroOrdine">Vai</a>
…
<div id="segnalibroOrdine">…</div>

Codice

Codice:

$('a[href*="#"]').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target || $('[id=' + this.hash.slice(1) +']');
  if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body').animate({scrollTop: targetOffset}, 1000);
  return false;}
  }
 });

**NLSweb** · 24-11-2014, 12.17.53

L'effetto ANIMATE di jQuery non supporta come stile di animazione lo scrollTop , ed inoltre href ti punta direttamente ..

ecco un esempio di come poter fare: DEMO

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('p[ancora*="#"]').click(function() {
 var zona = $(this).attr("ancora");
 var posizione = $(zona).offset();
 var posY = Math.round(posizione.top);
 var i = 0;
 var tempo = setInterval(function () {
  $('html').scrollTop(i);
  i++;
  if(i==posY){clearInterval(tempo);}
 },10);
});

});
</script>
</head>
<body>
<p ancora="#partePrima">VAI PRIMA PARTE</p>
<p ancora="#parteSeconda">VAI SECONDA PARTE</p>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h1 id="partePrima">PARTE PRIMA</h1>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h1 id="parteSeconda">PARTE SECONDA</h1>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
<h3>CIAO</h3>
</body>
</html>

Discussione: jQuery scroll verticale morbido della pagina non funziona

LinkBack

Strumenti discussione

Display

jQuery scroll verticale morbido della pagina non funziona

Regole di scrittura