Сквозной браузер JavaScript (не jQuery ...) прокрутка до верхней анимации

Question

Я ищу простую кросс-браузерную анимацию «прокрутки вверх», которую можно применить к ссылке.Я не хочу требовать JS-библиотеку, такую ​​как jQuery / Moo и т. Д.

// jQuery Equivilant to convert to pure JS...
$('html, body').animate({scrollTop:0}, 400);

Я идеальный случай для того, кто должен был изучить JS 100%, прежде чем прыгать в библиотеку.(

Answer 1

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

Демо:

function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)

function scrollTo(element, to, duration) {
  if (duration <= 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop == to) return;
    scrollTo(element, to, duration - 10);
  }, 10);
}

<p>Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
</p>
<button id=scrollme type="button">To the top</button>

Answer 2

похоже, что уже есть много решений. во всяком случае, вот еще один, использует уравнения ослабления ..

// first add raf shim
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

// main function
function scrollToY(scrollTargetY, speed, easing) {
    // scrollTargetY: the target scrollY property of the window
    // speed: time in pixels per second
    // easing: easing equation to use

    var scrollY = window.scrollY || document.documentElement.scrollTop,
        scrollTargetY = scrollTargetY || 0,
        speed = speed || 2000,
        easing = easing || 'easeOutSine',
        currentTime = 0;

    // min time .1, max time .8 seconds
    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));

    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
    var easingEquations = {
            easeOutSine: function (pos) {
                return Math.sin(pos * (Math.PI / 2));
            },
            easeInOutSine: function (pos) {
                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
            },
            easeInOutQuint: function (pos) {
                if ((pos /= 0.5) < 1) {
                    return 0.5 * Math.pow(pos, 5);
                }
                return 0.5 * (Math.pow((pos - 2), 5) + 2);
            }
        };

    // add animation loop
    function tick() {
        currentTime += 1 / 60;

        var p = currentTime / time;
        var t = easingEquations[easing](p);

        if (p < 1) {
            requestAnimFrame(tick);

            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
        } else {
            console.log('scroll done');
            window.scrollTo(0, scrollTargetY);
        }
    }

    // call it once to get started
    tick();
}

// scroll it!
scrollToY(0, 1500, 'easeInOutQuint');

Answer 3

Я изменил ответ TimWolla, чтобы использовать квадратичное ослабление на входе (немного плавнее :).Вот пример в действии: на jsFiddle .Функции ослабления доступны здесь: Функции ослабления Роберта Пеннера

document.getElementsByTagName('button')[0].onclick = function () {
    scrollTo(document.body, 0, 1250);   
}

function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        increment = 20;

    var animateScroll = function(elapsedTime) {        
        elapsedTime += increment;
        var position = easeInOut(elapsedTime, start, change, duration);                        
        element.scrollTop = position; 
        if (elapsedTime < duration) {
            setTimeout(function() {
                animateScroll(elapsedTime);
            }, increment);
        }
    };

    animateScroll(0);
}

function easeInOut(currentTime, start, change, duration) {
    currentTime /= duration / 2;
    if (currentTime < 1) {
        return change / 2 * currentTime * currentTime + start;
    }
    currentTime -= 1;
    return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}

Answer 4

window.scroll({top: 0, left: 0, behavior: 'smooth' });

Получено из статьи о Плавная прокрутка .

При необходимости доступно несколько полифилл .

Answer 5

Без кода JQuery, надеюсь, это поможет вам.

function TopscrollTo() {
if(window.scrollY!=0)
{
    setTimeout(function() {
       window.scrollTo(0,window.scrollY-30);
        TopscrollTo();
    }, 100);
   }
}

вызовите эту функцию TopscrollTo () для события нажатия кнопки или для любого другого элемента / события, которое вы хотите.

Answer 6

Я изменил код @TimWolla, чтобы добавить больше опций и некоторые функции движения. Также добавлена ​​поддержка кроссбраузера с document.body.scrollTop и document.documentElement.scrollTop

// scroll to top
scrollTo(0, 1000);

// Element to move, time in ms to animate
function scrollTo(element, duration) {
    var e = document.documentElement;
    if(e.scrollTop===0){
        var t = e.scrollTop;
        ++e.scrollTop;
        e = t+1===e.scrollTop--?e:document.body;
    }
    scrollToC(e, e.scrollTop, element, duration);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
    if (duration <= 0) return;
    if(typeof from === "object")from=from.offsetTop;
    if(typeof to === "object")to=to.offsetTop;

    scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
    if (t01 < 0 || t01 > 1 || speed<= 0) {
        element.scrollTop = xTo;
        return;
    }
    element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
    t01 += speed * step;

    setTimeout(function() {
        scrollToX(element, xFrom, xTo, t01, speed, step, motion);
    }, step);
}
function easeOutCuaic(t){
    t--;
    return t*t*t+1;
}

http://jsfiddle.net/forestrf/tPQSv/

Сокращенная версия: http://jsfiddle.net/forestrf/tPQSv/139/

// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){
    t--;
    return t*t*t+1;
}

Answer 7

Адаптировано с этот ответ :

function scroll(y, duration) {

    var initialY = document.documentElement.scrollTop || document.body.scrollTop;
    var baseY = (initialY + y) * 0.5;
    var difference = initialY - baseY;
    var startTime = performance.now();

    function step() {
        var normalizedTime = (performance.now() - startTime) / duration;
        if (normalizedTime > 1) normalizedTime = 1;

        window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI));
        if (normalizedTime < 1) window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}

Это должно позволить вам плавно прокручивать (функция косинуса) от любого места до указанного "y".

Answer 8

На самом деле существует чистый способ сделать это без использования setTimeout, requestAnimationFrame или jQuery.

Короче говоря, найдите элемент в scrollView, к которому вы хотите перейти, и используйте scrollIntoView

el.scrollIntoView({behavior:"smooth"});

Вот такой plunkr .

Answer 9

Чистый класс скроллера JAVASCRIPT

Это старый вопрос, но я подумал, что мог бы ответить с некоторыми причудливыми вещами и еще несколькими опциями, с которыми можно поиграть, если вы хотите иметь немного больше контроля над анимацией.

Кросс-браузер Готовое решение для копирования / вставки (Вам нужны только CSS и JS) 3 режима анимации: ["normal" | "linear" | false] Настройте анимацию с помощью доступных настроек - сделайте ее быстрой или плавной Двойной щелчок, чтобы пропустить анимацию Каждый следующий клик добавляет начальную скорость Остановите анимацию прокрутки, потянув вниз полосу прокрутки Остановить прокрутку анимации колесом мыши вниз Анимированная кнопка исчезновения при прокрутке

Вот вам класс JS, который позаботится о прокрутке для вас:

ПОСМОТРЕТЬ ДЕМО НА КОПЕДИРОВАТЬ ИЛИ ПЕРЕЙТИ В ДНО И ВЫПОЛНИТЬ СИНТПЕТ

// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
  'showButtonAfter': 200, // show button after scroling down this amount of px
  'animate': "linear", // [false|normal|linear] - for false no aditional settings are needed

  'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
    'steps': 20, // the more steps per loop the slower animation gets
    'ms': 10 // the less ms the quicker your animation gets
  }, 
  'linear': { // applys only if [animate: linear] - set scroll px|ms
    'px': 30, // the more px the quicker your animation gets
    'ms': 10 // the less ms the quicker your animation gets
  }, 
};


// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();

Скрипт полного класса + ПРИМЕР ИСПОЛЬЗОВАНИЯ:

// PURE JAVASCRIPT (OOP)

function Scroller(options) {
  this.options = options;
  this.button = null;
  this.stop = false;
}

Scroller.prototype.constructor = Scroller;

Scroller.prototype.createButton = function() {

  this.button = document.createElement('button');
  this.button.classList.add('scroll-button');
  this.button.classList.add('scroll-button--hidden');
  this.button.textContent = "^";
  document.body.appendChild(this.button);
}

Scroller.prototype.init = function() {
  this.createButton();
  this.checkPosition();
  this.click();
  this.stopListener();
}

Scroller.prototype.scroll = function() {
  if (this.options.animate == false || this.options.animate == "false") {
    this.scrollNoAnimate();
    return;
  }
  if (this.options.animate == "normal") {
    this.scrollAnimate();
    return;
  }
  if (this.options.animate == "linear") {
    this.scrollAnimateLinear();
    return;
  }
}
Scroller.prototype.scrollNoAnimate = function() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
Scroller.prototype.scrollAnimate = function() {
  if (this.scrollTop() > 0 && this.stop == false) {
    setTimeout(function() {
      this.scrollAnimate();
      window.scrollBy(0, (-Math.abs(this.scrollTop()) / this.options.normal['steps']));
    }.bind(this), (this.options.normal['ms']));
  }
}
Scroller.prototype.scrollAnimateLinear = function() {
  if (this.scrollTop() > 0 && this.stop == false) {
    setTimeout(function() {
      this.scrollAnimateLinear();
      window.scrollBy(0, -Math.abs(this.options.linear['px']));
    }.bind(this), this.options.linear['ms']);
  }
}

Scroller.prototype.click = function() {

  this.button.addEventListener("click", function(e) {
    e.stopPropagation();
    this.scroll();
  }.bind(this), false);

  this.button.addEventListener("dblclick", function(e) {
    e.stopPropagation();
    this.scrollNoAnimate();
  }.bind(this), false);

}

Scroller.prototype.hide = function() {
  this.button.classList.add("scroll-button--hidden");
}

Scroller.prototype.show = function() {
  this.button.classList.remove("scroll-button--hidden");
}

Scroller.prototype.checkPosition = function() {
  window.addEventListener("scroll", function(e) {
    if (this.scrollTop() > this.options.showButtonAfter) {
      this.show();
    } else {
      this.hide();
    }
  }.bind(this), false);
}

Scroller.prototype.stopListener = function() {

  // stop animation on slider drag
  var position = this.scrollTop();
  window.addEventListener("scroll", function(e) {
    if (this.scrollTop() > position) {
      this.stopTimeout(200);
    } else {
      //...
    }
    position = this.scrollTop();
  }.bind(this, position), false);

  // stop animation on wheel scroll down
  window.addEventListener("wheel", function(e) {
    if (e.deltaY > 0) this.stopTimeout(200);
  }.bind(this), false);
}

Scroller.prototype.stopTimeout = function(ms) {
  this.stop = true;
  // console.log(this.stop); //
  setTimeout(function() {
    this.stop = false;
    console.log(this.stop); //
  }.bind(this), ms);
}

Scroller.prototype.scrollTop = function() {
  var curentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  return curentScrollTop;
}



// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
  'showButtonAfter': 200, // show button after scroling down this amount of px
  'animate': "normal", // [false|normal|linear] - for false no aditional settings are needed

  'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
    'steps': 20, // the more steps per loop the slower animation gets
    'ms': 10 // the less ms the quicker your animation gets
  },
  'linear': { // applys only if [animate: linear] - set scroll px|ms
    'px': 30, // the more px the quicker your animation gets
    'ms': 10 // the less ms the quicker your animation gets
  },
};
// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();

/* CSS */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
 body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  line-height: 2rem;
  height: 100%;
  position: relative;
  padding: 0 25%;
}
.scroll-button {
  font-size: 1.2rem;
  line-height: 2rem;
  padding: 10px;
  width: 50px;
  height: 50px;
  background: black;
  color: white;
  border-radius: 50%;
  position: fixed;
  right: 20px;
  bottom: 20px;
  visibility: visible;
  filter: alpha(opacity=50);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  cursor: pointer;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
  -moz-transition: all 1.2s;
  -ms-transition: all 1.2s;
  -o-transition: all 1.2s;
}
.scroll-button:hover {
  filter: alpha(opacity=100);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.scroll-button--hidden {
  filter: alpha(opacity=0);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}

<!-- HTML -->

Scroll down by 200px for button to appear

  Cross-browser
  Copy/Paste solution
  3 animate modes: ["normal"|"linear"|false]
  Customize your aniamtion with aveilable settings - make it snapy or fluent
  Double click to skip animation
  Every next single click adds initial speed
  Stop scroll animation by draging down the scroll bar
  Stop scroll animation by mouse wheel down
  Animated button fade-in-out on scroll







// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
  'showButtonAfter': 200, // show button after scroling down this amount of px
  'animate': "normal", // [false|normal|linear] - for false no aditional settings are needed
  
  'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
    'steps': 20, // the more steps the slower animation gets
    'ms': 20 // the less ms the quicker your animation gets
  }, 
  'linear': { // applys only if [animate: linear] - set scroll px|ms
    'px': 55, // the more px the quicker your animation gets
    'ms': 10 // the less ms the quicker your animation gets
  }, 
};

// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Quae molestiae illo nobis quo autem molestias vulptatum quam, amet ipsum debitis, iure animi illum soluta eaque qui perspicpicis harum, sequi nesciunt. Quisquam nesciunt aspernatur возможный pariatur enim architect. Hic Aperiam Sit Repelat Doloremque Velst Soluta и предположения Dolore, Sint Sapiente Porro, Quam Impedit. Sint praesentium quas exculuri, volptatem dicta!

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Voluptate, porro nisi molestias minima corpti tempore, dolorum fugiat ipsam dicta doloremque accusamus atque consequatur iusto natus, mollitia distinctio odit dolor tempora. Perferendis a in laudantium accusantium, вальцовая кость сосуда в высшей степени плетения соска среднего возраста плаценты на верхнем левом верхушке сосудов среднего уха плаценты architecto Suscipit Rem Labouriosam является волюптом Labourum? Волнует темпора потребность в аниме нострум, Максим Одио.

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Nihil accusantium, Itaque Corporis Repellat pariatur soluta officia perspiciatis в репеэндерит лицевая сторона, врожденный сипе, исключая. Inventtore atque ex illo, ipsam at deserunt. Labourum inventore officia, perspiciatis cumque magni consequatur iste accusantium soluta, nesciunt blanditiis coeptatibus adipisci laudantium mollitia minus quia needitatibus coeptates. Минимум недооценки, что необходимо для aspernatur minus maiores ipsa eligendi!

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Voluptate nesciunt, explicabo similique, quo maxime modi, aliquid, volptatibus repllendus dolorum placeat mollitia ea dicta quia labouriosam alias dignissimos ipsam tenetur. Nulla. Vel maiores needitatibus odio coepp. Debitis, ошибка в accusamus nulla, eum, nemo et ea commodi. Autem numquam at, consquatur temporibus. Mollitia placeat nobis blanditiis impedit distinctio! Ad, incidunt fugiat sed.

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Ipsam volptatum, odio quam omnis iste laudantium, itaque architecto, eos ullam debitis delectus sapiente nemo autem preshenderit. Dolorem Quidem Facere Ipsam! Nisi. Vitae quaerat modi coeptatibus ratione numquam? Sapiente aliquid officia pariatur quibusdam aliquam id expedita non recusandae, cumque deserunt asperiores. Corrupti et doloribus aspernatur ipsum asperiores, ipsa unde corporis commodi reiciendis?

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit.Minima adipisci minus iste, nesciunt itaque quisquam quidem vulptatum acceptnda rerum aliquid, за исключением vulptatem tempora.Псевдоним ratione псевдоним ошибки vel, rem. Officia esse error accusantium veritatis ad, et sit animi?Recolanda mollitia odit tenetur ad cumque maiores eligendi blanditiis nobis hic tempora obcaecati consquatur commodi totam, дебит, veniam, ducimus molestias ut.

Lorem ipsum adorsis elitmet, концерт.Obcaecati quibusdam, tempora cupiditate quaerat tempore ullam delectus volptates optio eum placeat предусмотрительный конкватурат iure contehenderit vero quae sapiente architecto earum nemo. Quis molestias sint fuga doloribus, needitatibus nulla.Esse ipsa, itaque asperiores.Tempora a sequi nobis cumque incidunt aspernatur, pariatur rem mobptatibus.Atque veniam magnam, ea laudantium ipsum preshenderit sapiente repellendus.

Lorem ipsum dolor sit amet, специалист по адептизирующей элите.Minima, pariatur at explicabo aliquid repudiandae vero eum квазототам волюпутов, как правило, так и есть, ipsam и волпатем hic adipisci!Vero, nobis! Consequatur eligendi de qua omnis architecto dolorum aperiam doloremque labore, explicabo enim incidunt vitae saepe, quod soluta illo odit предусматривают amet beatae quasi animi.Similique nostrum molestiae animi corpti qui?

Lorem ipsum dolor sit amet, концертный адептирующий элит.Molestias quis, tempora Laborum Inidunt Qui Fuga Adipisci Doloremque Iusto Commodi Vitae Est, Nemo Iure Placeat Ut Sit Optio, Conquuntur Voluptas Impedit. Eos officiis, Hic Esse undea Eque, Aut Tenetur Vluptate Quam Sint é é é é é é é é é é é, aut,Soluta illo praesentium не поврежден!Consequuntur Velit, Mollitia exceuri.Минус, Veniam Accusantium!Aliquam, ea!

Lorem ipsum dolor sit amet, посвященный адептизу элит.Reprederit quis reiciendis veritatis expedita velit vitae amet magni sunt rerum в blanditiis aut tempore quia fugiat, волюпутов officia quaerat quam id. Sapiente tempore repudiandae, quae doloremque ullam odio quia ea!Impedit Atque, Ipsa Conquatur Quis Obcaecati Volptas Needitatibus, Купидон Сант Amet Ab Modi Illum Inventore, Dolor Enim Similique Architecto Est!

Lorem Ipsum Долор Сит Амет, Concectetur Adipisicing Elit.Itaque non aliquam, sit illo quas deserunt esse nobis contehenderit quidem fuga beatae eligendi reiciendis omnis qui repelllat velit earum blanditiis possimus. Обеспечивающий aspernatur ducimus, illum beatae debitis vivus prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius nonus delum prius nonus prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius prius nonusorum без донора.спокойный вечер на Quaerat ea Perferendis.Ut, aut, natus.

Lorem ipsum dolor sit amet, ведущий адептирующий элит.Ratione Corpti Quibusdam, Sed Hic Veniam.Perspiciatis ex, quod architecto natus autem totam at Goods, Exceuri Maxime Pariatur Corporis, Veritatis Vero, Praesentium. Nesciunt suscipit, nobis eos perferendis ex quaerat inventore Нигий цюаньский магнезиэс реуэм эймезис переименованим в озвученных делах!, Nisi Volptates Amet Eaque, Iste, Labau Laudantium.

Lorem Ipsum Долор Сит Амет, Acepisicing Concetetur Элит.Illo, volptas accusantium ad omnis velit distinctio!Adipisci magnam nihil nostrum molestiae rem dolores, ut ad nemo, dolor quos itaque maiores quaerat! Quia ad suscipit preshenderit vitae inventore eius non culpa maiores omnis sit obcaecati vel placeat quibusdam, ipsa exercitationem nam.Quam quas, accusamus expedita molestiae asperiores eaque ex?

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Rerum explicabo doloribus nihil iusto quasi vel expedita dignissimos amet mollitia, temporibus aut atque architecto acceptnda dolorum nam Velit deserunt totam numquam. Ab perferendis labour, quae. Quidem architecto quo officia deserunt ea doloribus libero molestias id nisi perferendis eum porro, quibusdam! Одностороннее размещение средств по месту службы, минус сит, esse eos obcaecati!

Lorem ipsum dolor sit amet, посвященный адептизирующей элите. Eligendi nostrum repellendus placeat, unde aperiam. Фуга, волупы, минимумы. Debitis nemo ducimus itaque labouriosam error quaerat preshenderit quo animi incidunt. Nulla, quis! Объяснишь предположения? Tempora Goods Asperiores, explicabo doloremque eius quia impedit possimus architecto sit nemo odio eum fuga минимумы dolor iste mollitia sequi dolorem perspiciatis undeis quisquam labourium sololuta.

Lorem ipsum dolor sit amet, посвященный адепсису элит. Veniam officia corporis, reiciendis laudantium, волптат волпутат, необходимый для того, чтобы взять на себя, delectus quisquam velit deserunt! Reprederit, Vel Quaerat Accusantium Nesciunt Libero Animi. Sequi, Eveniet? Animi natus pariatur porro, псевдоним, veniam aut the tempora adipisci molestias harum modi cumque acceptnda enim! Expedita Eveniet Autem Illum Rerum Nostrum IPS псевдоним neque aut, долорум impedit pariatur non?

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Quis aliquid rerum, odio veniam ipsam ad officia quos repllat ex aperiam coeptatum optio est animi possimus минус. Sapiente volptates amet dolorem. Illo needitatibus similique asperiores inventore ut cumque nihil acceptnda debitis explicabo rerum, dolorum molestiae culpa accusantium. Nisi doloremque optio Provent blanditiis, eum ipsam asperiores, consquatur aliquam vel sit mollitia sunt.

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Enim, totam harum perferendis. Минус и время труда, истерик, безупречность, недооценка, страх и риск! Ошибка, харум, волептис. Omnis labum, сперма молочной железы, ипса унде дистинктивен, максимальный, неосвещенный свет perspiciatis ut officiis, eligendi numquam dolorem quod modi ipsam est rerum perferendis repllendus totam. Максимус исключая виновника трудовой деятельности.

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. Impedit deleniti, odit sit consquatur dolorum omnis repellendus, alias vel ullam numquam. Nostrum obcaecatiic hic, possimus delectus nam atque aliquid explicabo cum. Explicabo tenetur minima consquatur, aliquam, laudantium, не являющийся следом facilis sint, suscipit debitis ex atque mollitia magi quode rellumum недопустимый судебный процесс за исключением повторного исчисления судебных исков за исключением повторного исчисления судебных исков, за исключением повторного исчисления судебных исков, за исключением повторного исчисления судебных исков, за исключением повторного исчисления судебных исков, за исключением повторного исчисления судебных исков? Voluptatum dolores, porro Provent!

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit. При labouriosam fuga aperiam eveniet, obcaecati esse, nulla porro iure molestiae praesentium sint fugiat ea vulptate suscipit volptates mollitia, voptatibus. Autem, non. Numquam velit culpa tempora ratione ipsum минус мода в? Nisi reiciendis, волптат, волптатем, максим, репеллент, квазио, репеллент, аликвидный лейборист. Labore, fuga ea minima explicabo quae coeptatum needitatibus, similique.

Lorem ipsum dolor sit amet, ведущий адептирующий элит. Quasi, rerum dolorum nemo error fugiat ut, modi, architecto libero maxime Laborum repellendus doloribus neque aperiam adipisci quaerat obcaecati decerunt consquuntur amet! Синт, предположим, nisi obcaecati doloremque iste. Perspiciatis accusantium, distinctio impedit cum esse recusandae sunt. Officiis culpa dolore eius, doloribus natus, dolorum excuriuri vitae fugiat ullam Provant harum! Suscipit, acceptnda, harum.

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit.Odit, nihil tenetur tempore eligendi qui nesciunt consequatur delectus accusantium consectetur ipsa, nulla doloribus dolores rerum corporis, labourum, labour, hic mollitia repllat. Ab deleniti vitae blanditiis quet quetVoluptatem temporibus ab eaque quis?Quis odio aliquid harum temporibus totam, ipsa eius iusto fugiat enim in, quibusdam molestiae aliquam consequatur nulla, consequuntur sint.

Lorem ipsum dolor sit amet, чел.Illum odit praesentium quos, numciunt laudantium illo tempora eligendi, porro doloremque mollitia neque aperiam inventore nam maxime dolor labore aspernatur molestias. Предоставление услуг по изучению и постановке задач.Doloribus molestiae, quae rem odit expedita soluta, facilis animi corporis velit ut in, recusandae harum labouriosam veritatis.

Lorem ipsum dolor sit amet, ученик, участвующий в элите.Inidunt repudiandae molestias magnam delectus veritatis labore, corporis dicta officia quos, ad поврежденный odit!Ad hic officia maxime Eveniet Concetetur Similique Adipisci! Quia at, nesciunt aliquid delectus ex alias показаний maxim hic esse.Incidunt, labourum quos mollitia dolores et!Voluptas commodi asperiores, fugit quidem quis corporis, eaque, animi, autem deserunt repllendus.

Lorem ipsum dolor sit amet, последователь adipisicing elit.Sequi Quas, Volptas Hic Minima Inventore Optio, ID Quidem Placeat Needitatibus Omnis Volptatibus Vitae Mollitia Tempora Conquuntur Concequatur, Illo Facilis Accusamus Illum. Волнует Conquuntur IPSAM Odit.Eius quis ipsam vitae, Nihil Molestias Perferendis Corporis Recusandae Conquatur Vero Iure Blanditiis Quas Adipisci Quos Volptatem Rem Illo Volptate.Eveniet officiis iure sit лейбориум вениам.

Lorem ipsum dolor sit amet, приверженец совершеннолетия elit.Suscipit a quis cumque nostrum quisquam molestiae pariatur, asperiores natus needitatibus adipisci illum cupiditate nam vero, tempora exceuriourumum, earum.Voluptates, nobis. Pariatur suscipit, hic blanditiis libero, iusto, quam cupiditate nam error id asperiores repllat ab abququatur vitae ipsa vulptatem totam magni reiciendis expedita maxime dolor!Минус explicabo quas, labourum ab omnis!

Lorem ipsum dolor sit amet, элитный специалист по адептизингу.Labour qui ad acceptnda placeat optio illo molestias corporis dolorum cum.Doloribus eius autem obcaecati минимумы, asperiores iure dignissimos ducimus suscipit dolorem. Blanditiis earum accusamus eaque temporibus Needitatibusbus coeptatum dolptm enim debitis inventore acceptnda quae error persamia quam persacia acus quama qua qua quena qua qua qua qua qua qua lus qua qua lus qua qua lus qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua qua lus qua lus qua lus qua qua qua qua qua quen de usa qua qua de lus qua quus eva.Nesciunt praesentium, beatae eos quasi!

Lorem ipsum dolor sit amet, приверженец совершенствования элиты.Купидон продиктованный?Ad dicptatum dicta earum perferendis asperiores.Dolore distinctio modi expedita consquatur предоставлено perspiciatis neque totam rerum placeat quas. Eveniet optio est possimus iste accusantium ipsum illum.Maiores saepe repudiandae facere, delectus iure dolorem vitae nihil pariatur minima, репендендерит eligendi dolore impedit, nisi doloribus quidem similique.Оптио, делектус, минус.

Lorem ipsum dolor sit amet, concitteur adipisicing elit.Iste ex molestiae architecto enim nihil tempore, atque coequuntur doloribus recusandae sed consquatur veniam quos, в contectetur perspiciatis magni nostrum ab coeptates. Nisi quos mollitia quis в основной трудовой деятельности, вызывающей беспокойство!Voluptate vulptas adipisci qui hic officia molestias, Laborum Needitatibus Sint Nam Vel Minus Incidunt Perspiciatis recusandae sunt, rerum suscipit doloremque possimus!

Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit.В nihil perferendis quae quidem facilis aliquid pariatur possimus hic asperiores, recusandae exercitationem adipisci atque Laborum, delectus, odit ab preshenderit distinctio dolor. Без исключений, aspernatur repudiandae labourusamus, uamus deusususususususususus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, usus, такжевелит амет ниси!Consectetur aliquam предоставил волеизъявление saepe repudiandae eveniet labourum beatae, аними, волептат долорес.

Lorem ipsum dolor sit amet, последователь adipisicing elit.Cumque magni, eum ipsa, veritatis facere vulptatem dolorum nobis neque минус дебит asperiores iste.Pariatur sequi quam, tempora.Dignissimos, esse similique tempora. Ex delectus exculuri autem sunt, nemo repudiandae, recusandae nostrum accusantium nobis temporibus magnam eligendi similique veritatis deleniti, eaque blanditiis possimus at!Repellat псевдоним Laboriosam Ipsum Commodi Dolorem, Corporis Dolore Suscipit!

Answer 10

Легко.

var scrollIt = function(time) {
    // time = scroll time in ms
    var start = new Date().getTime(),
        scroll = document.documentElement.scrollTop + document.body.scrollTop,
        timer = setInterval(function() {
            var now = Math.min(time,(new Date().getTime())-start)/time;
            document.documentElement.scrollTop
                = document.body.scrollTop = (1-time)/start*scroll;
            if( now == 1) clearTimeout(timer);
        },25);
}