scrollintoview animation

问题:

My code is at http://jsfiddle.net/mannagod/QT3v5/7/.

The JS is:

function delay() {     var INTENDED_MONTH = 7 //August     // INTENDED_MONTH is zero-relative     now = new Date().getDate(), rows = document.getElementById('scripture').rows;     if (new Date().getMonth() != INTENDED_MONTH) {         // need a value here less than 1,          // or the box for the first of the month will be in Red         now = 0.5     };     for (var i = 0, rl = rows.length; i 

I need to find a way to smooth the .scrollintoview(). Right now it 'jumps' to the highlighted row. I need it to smoothly transition to that row. It needs to be done dynamically in replacement of scrollintoview. Any ideas? Thanks.

回答1:

There's a jQuery plugin exactly for that

Here's the link to a blog post of mine that describes the whole thing and has link to GitHub project where you can get the plugin.

Animated scrollintoview() jQuery plugin.

回答2:

i was searching this issue too and found this solution:

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

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

回答3:

Maybe you don't want to add jQuery just for implementing this feature. elem is the element to be scrolled. The destination pos can be taken from the offsetTop property of the element to be moved into view.

function Scroll_To(elem, pos) {     var y = elem.scrollTop;     y += (pos - y) * 0.3;     if (Math.abs(y-pos) 

回答4:

In Firefox (and apparently only there) you can pass a JSON object as argument. Try this:

elm.scrollIntoView({ behavior: 'smooth' }) 

See also: https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView

回答5:

Smooth scrolling using requestAnimationFrame over a specific duration with no jQuery.

Demo: 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 

Eg:

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

It should speed up as dt (deltaTime) gets bigger, and slows down as distanceLeft get's smaller. I considered breaking the loop if the user scrolled but meh. Global variables prevent the previous call from completely taking over, but doesn't cancel the previous recursive loop so it'll animate twice as fast.

回答6:

You just need to include this polyfill and it works.

https://github.com/iamdustan/smoothscroll

Or require it if you use npm.

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

Use native scrollIntoView Method.

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

回答7:

Try this:

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_width0))         {   to_scroll.push({elem: p, prop: 'scrollLeft', from: p.scrollLeft, offset: offset});         }         if (client_height0))         {   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 

文章来源: scrollintoview animation