animation scrollintoview

je suis à la recherche de ce problème et a trouvé cette solution:

$('html, body').animate({
    scrollTop: $("#elementId").offset().top
}, 1000);

ressources: http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

Dans la plupart des navigateurs modernes ( Chrome et Firefox, mais pas Safari, UC, ou IE) vous pouvez passer des options dans un objet à .scrollIntoView().

essaye ceci:

elm.scrollIntoView({ behavior: 'smooth', block: 'center' })

les Autres valeurs sont behavior: 'instant' ou block: 'start' ou block: 'end'. Voir https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

peut-être que vous ne voulez pas ajouter jQuery juste pour la mise en œuvre de cette fonctionnalité. elem est l'élément à défiler. La position de destination peut être prise à partir de la propriété offsetTop de l'élément à déplacer.

function Scroll_To(elem, pos)
{
    var y = elem.scrollTop;
    y += (pos - y) * 0.3;
    if (Math.abs(y-pos) < 2)
    {
        elem.scrollTop = pos;
        return;
    }
    elem.scrollTop = y;
    setTimeout(Scroll_To, 40, elem, pos);   
}

lisser le défilement en utilisant requestAnimationFrame sur une durée déterminée sans jQuery.

Démo: http://codepen.io/Shadeness/pen/XXyvKG?editors=0010

window.bringIntoView_started = 0;
window.bringIntoView_ends = 0;
window.bringIntoView_y = 0;
window.bringIntoView_tick = function() {
  var distanceLeft, dt, duration, t, travel;
  t = Date.now();
  if (t < window.bringIntoView_ends) {
    dt = t - window.bringIntoView_started;
    duration = window.bringIntoView_ends - window.bringIntoView_started;
    distanceLeft = window.bringIntoView_y - document.body.scrollTop;
      travel = distanceLeft * (dt / duration);
      document.body.scrollTop += travel;
      window.requestAnimationFrame(window.bringIntoView_tick);
  } else {
    document.body.scrollTop = window.bringIntoView_y;
  }
};
window.bringIntoView = function(e, duration) {
  window.bringIntoView_started = Date.now();
  window.bringIntoView_ends = window.bringIntoView_started + duration;
  window.bringIntoView_y = Math.min(document.body.scrollTop + e.getBoundingClientRect().top, document.body.scrollHeight - window.innerHeight);
  window.requestAnimationFrame(window.bringIntoView_tick);
};

par exemple:

bringIntoView(document.querySelector('#bottom'), 400)

Il devrait accélérer comme dt (deltaTime) devient plus grand, et ralentit distanceLeft get est plus petit. J'ai pensé briser la boucle si l'utilisateur filait mais meh. Les variables globales empêchent l'appel précédent de prendre le dessus complètement, mais n'annulent pas le précédent boucle récursive afin d'animer deux fois plus vite.

vous avez juste besoin d'inclure ce polyfill et cela fonctionne.

https://github.com/iamdustan/smoothscroll

<script src="js/smoothscroll.js"></script>

Ou l'exiger si vous utiliser npm.

require('smoothscroll-polyfill').polyfill();

utilisez la méthode native scrollIntoView.

document.getElementById('parallax-group-logo').scrollIntoView({
    block: "start",
    behavior: "smooth"
});

essaye ceci:

function scroll_into_view_smooth(elem)
{   var FPS = 48; // frames per second
    var DURATION = 0.6; // sec
    var e = elem;
    var left = e.offsetLeft;
    var top = e.offsetTop;
    var width = e.offsetWidth;
    var height = e.offsetHeight;
    var body = document.body;
    var to_scroll = [];
    var p, offset;
    while ((p = e.offsetParent))
    {   var client_width = p.clientWidth;
        var client_height = p!=body ? p.clientHeight : Math.min(document.documentElement.clientHeight, window.innerHeight);
        if (client_width<p.scrollWidth-1 && ((offset=left-p.scrollLeft)<0 || (offset=left+width-p.scrollLeft-client_width)>0))
        {   to_scroll.push({elem: p, prop: 'scrollLeft', from: p.scrollLeft, offset: offset});
        }
        if (client_height<p.scrollHeight-1 && ((offset=top-p.scrollTop)<0 || (offset=top+height-p.scrollTop-client_height)>0))
        {   to_scroll.push({elem: p, prop: 'scrollTop', from: p.scrollTop, offset: offset});
        }
        e = p;
        left += e.offsetLeft;
        top += e.offsetTop;
    }
    var x = 0;
    function apply()
    {   x = Math.min(x+1/(DURATION * FPS), 1);
        for (var i=to_scroll.length-1; i>=0; i--)
        {   to_scroll[i].elem[to_scroll[i].prop] = to_scroll[i].from + to_scroll[i].offset*x*x;
        }
        if (x < 1)
        {   setTimeout(apply, 1000/FPS);
        }
    }
    apply();
}