Jquery Scrolling

[luisfgomes16 0]

Boas,

Eu estou a criar um projeto em php com jQuery e Ajax. O que eu pretendia neste momento saber é se haveria alguma maneira de criar um botão "on scroll", que submete-se o formulário, ao invés de voltar ao topo da página.

 

Obrigado

[L. Henrique 179]

Sim, você precisa criar o comando onscroll e definí-lo para o ID da div que contém o form.

 

Ex.:

$('.anchor').click(function(){
   $('html, body').animate({
      scrollTop: $( $(this).attr('href') ).offset().top;
   }, 500);

   return false;
});

Esse é um código jQuery para executar o smooth scroll dentro da sua página. Pra você fazer isso funcionar, dentro do seu href do anchor (<a>), você precisa colocar o ID da div no qual ele pretende parar.

 

Ex.:

<div id="pararAqui"></div>

<a href="#pararAqui">Subir</a>

Obs.: Bem, caso prefira utilizar Javascript puro para executar o smooth scroll (prefira, por favor), você também, além do código, precisará chamar a função dentro do HTML, siga exemplos abaixo:

window.smoothScroll = function(target) {
   var scrollContainer = target;
   
   do {
      scrollContainer = scrollContainer.parentNode;
      if ( !scrollContainer ) return;
      scrollContainer.scrollTop += 1; 
   } while ( scrollContainer.scrollTop == 0);

   var targetY = 0;

   do {
      if ( target == scrollContainer ) break;
      targetY += target.offsetTop;
   } while ( target = target.offsetParent );

   scroll = function ( a, b, c, d ) {
      d++;
      if ( d > 30 ) return;
      a.scrollTop = b + ( c - b ) / 30 * d;

      setTimeout(function(){
         scroll( a, b, c, d );
      }, 20);
   }

   scroll( scrollContainer, scrollContainer.scrollTop, targetY, 0 );
}

<a onclick="smoothScroll(document.getElementById('ID_DA_DIV_OU_FORM'))">Subir</a>