web-dev-qa-db-fra.com

javascript lisse défilement sur clic

J'utilise ce lien:

<a class="" onclick="location.href='#top'" href="superContent">superContent</a>

Cela fait deux choses à la fois:

  1. Fait passer l'utilisateur en haut de la page
  2. Exécute cette autre fonction de chargement ajax (non liée)

Tout fonctionne très bien, sauf que j'essaie de trouver comment le faire défiler vers le haut plus facilement. J'ai essayé d'ajouter .scroll pour le joindre à mon plugin jquery scrollTo, mais rien ne se passe, ce qui a probablement quelque chose à voir avec le fait que j'utilise javascript onclick, tandis que l'attribut href fait entièrement autre chose.

Existe-t-il un moyen de joindre un défilement fluide animé à onclick = "location.href = '# top'"?

javascriptscrolltop
15
user1691389

Essayez ceci, il anime la fonction scrollTop().

Définir l'ID du lien:

<a id="link">link</a>

jquery pour faire défiler:

$('#link').click(function(e){
  var $target = $('html,body');
  $target.animate({scrollTop: $target.height()}, 500);
});
40
PRNDL Development Studios
document.querySelector('button').addEventListener('click', function(){
   scrollTo( document.querySelector('aside'), Math.floor(Math.random() * 1000) + 1  , 600 );   
});
    
function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;
        
    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t + b;
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};
button{ float:left; }
aside{ height:200px; width:50%; border:2px dashed red; overflow:auto; }
aside::before{
  content:''; 
  display:block; 
  height:1000px;  
  background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);
}
<button>click to random scroll</button>
<aside></aside>
4
vsync