Гладкая прокрутка без использования jQuery

Я кодирую страницу, где я хочу использовать только код JavaScript для UI без каких-либо помех плагинов или фреймворков.

И теперь я изо всех сил стараюсь прокручивать страницу без jQuery.

Ответ 1

Попробуйте плавное прокручивание демо или алгоритм вроде:

Получить текущее верхнее местоположение с помощью self.pageYOffset
Получить позицию элемента до тех пор, пока вы не прокрутите список до: element.offsetTop
Для этого нужно сделать цикл for, который будет довольно быстрым или использовать таймер для выполнения плавной прокрутки до этой позиции с помощью window.scrollTo

См. также другой популярный ответ на этот вопрос.

Эндрю Джонсон оригинальный код:

function currentYPosition() {
    // Firefox, Chrome, Opera, Safari
    if (self.pageYOffset) return self.pageYOffset;
    // Internet Explorer 6 - standards mode
    if (document.documentElement && document.documentElement.scrollTop)
        return document.documentElement.scrollTop;
    // Internet Explorer 6, 7 and 8
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}


function elmYPosition(eID) {
    var elm = document.getElementById(eID);
    var y = elm.offsetTop;
    var node = elm;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}


function smoothScroll(eID) {
    var startY = currentYPosition();
    var stopY = elmYPosition(eID);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY); return;
    }
    var speed = Math.round(distance / 100);
    if (speed >= 20) speed = 20;
    var step = Math.round(distance / 25);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i=startY; i<stopY; i+=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step; if (leapY > stopY) leapY = stopY; timer++;
        } return;
    }
    for ( var i=startY; i>stopY; i-=step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
    }
}

Ссылки по теме:

Ответ 2

Редактировать: этот ответ был написан в 2013 году. Пожалуйста, проверьте комментарий Кристиана Трейны ниже о запросеAnimationFrame

Я сделал это. Код ниже не зависит от какой-либо структуры.

Ограничение: активный якорь не указан в URL-адресе.

Версия кода: 1.0 | Github: https://github.com/Yappli/smooth-scroll

(function() // Code in a function to create an isolate scope
{
var speed = 500;
var moving_frequency = 15; // Affects performance !
var links = document.getElementsByTagName('a');
var href;
for(var i=0; i<links.length; i++)
{   
    href = (links[i].attributes.href === undefined) ? null : links[i].attributes.href.nodeValue.toString();
    if(href !== null && href.length > 1 && href.substr(0, 1) == '#')
    {
        links[i].onclick = function()
        {
            var element;
            var href = this.attributes.href.nodeValue.toString();
            if(element = document.getElementById(href.substr(1)))
            {
                var hop_count = speed/moving_frequency
                var getScrollTopDocumentAtBegin = getScrollTopDocument();
                var gap = (getScrollTopElement(element) - getScrollTopDocumentAtBegin) / hop_count;

                for(var i = 1; i <= hop_count; i++)
                {
                    (function()
                    {
                        var hop_top_position = gap*i;
                        setTimeout(function(){  window.scrollTo(0, hop_top_position + getScrollTopDocumentAtBegin); }, moving_frequency*i);
                    })();
                }
            }

            return false;
        };
    }
}

var getScrollTopElement =  function (e)
{
    var top = 0;

    while (e.offsetParent != undefined && e.offsetParent != null)
    {
        top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
        e = e.offsetParent;
    }

    return top;
};

var getScrollTopDocument = function()
{
    return document.documentElement.scrollTop + document.body.scrollTop;
};
})();

Ответ 3

Естественная прокрутка браузера в JavaScript выглядит так:

// scroll to specific values,
// same as window.scroll() method.
// for scrolling a particular distance, use window.scrollBy().
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

// scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // negative value acceptable
  left: 0, 
  behavior: 'smooth' 
});

// scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

Ответ 4

Алгоритм

Прокрутка элемента требует изменения значения scrollTop с течением времени. В течение заданного момента вычислите новое значение scrollTop. Чтобы плавно анимировать, интерполируйте с помощью алгоритма с плавным шагом.

Рассчитайте scrollTop следующим образом:

var point = smooth_step(start_time, end_time, now);
var scrollTop = Math.round(start_top + (distance * point));

Где:

start_time - время начала анимации;
end_time - это когда анимация закончится (start_time + duration);
start_top - значение scrollTop в начале; и
distance - разница между желаемым конечным значением и начальным значением (target - start_top).

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

Demo

См. JSFiddle.

Реализация

Код:

/**
    Smoothly scroll element to the given target (element.scrollTop)
    for the given duration

    Returns a promise that fulfilled when done, or rejected if
    interrupted
 */
var smooth_scroll_to = function(element, target, duration) {
    target = Math.round(target);
    duration = Math.round(duration);
    if (duration < 0) {
        return Promise.reject("bad duration");
    }
    if (duration === 0) {
        element.scrollTop = target;
        return Promise.resolve();
    }

    var start_time = Date.now();
    var end_time = start_time + duration;

    var start_top = element.scrollTop;
    var distance = target - start_top;

    // based on http://en.wikipedia.org/wiki/Smoothstep
    var smooth_step = function(start, end, point) {
        if(point <= start) { return 0; }
        if(point >= end) { return 1; }
        var x = (point - start) / (end - start); // interpolation
        return x*x*(3 - 2*x);
    }

    return new Promise(function(resolve, reject) {
        // This is to keep track of where the element scrollTop is
        // supposed to be, based on what we're doing
        var previous_top = element.scrollTop;

        // This is like a think function from a game loop
        var scroll_frame = function() {
            if(element.scrollTop != previous_top) {
                reject("interrupted");
                return;
            }

            // set the scrollTop for this frame
            var now = Date.now();
            var point = smooth_step(start_time, end_time, now);
            var frameTop = Math.round(start_top + (distance * point));
            element.scrollTop = frameTop;

            // check if we're done!
            if(now >= end_time) {
                resolve();
                return;
            }

            // If we were supposed to scroll but didn't, then we
            // probably hit the limit, so consider it done; not
            // interrupted.
            if(element.scrollTop === previous_top
                && element.scrollTop !== frameTop) {
                resolve();
                return;
            }
            previous_top = element.scrollTop;

            // schedule next frame for execution
            setTimeout(scroll_frame, 0);
        }

        // boostrap the animation process
        setTimeout(scroll_frame, 0);
    });
}

Ответ 5

Я привел пример без jQuery здесь: http://codepen.io/sorinnn/pen/ovzdq

/**
    by Nemes Ioan Sorin - not an jQuery big fan 
    therefore this script is for those who love the old clean coding style  
    @id = the id of the element who need to bring  into view

    Note : this demo scrolls about 12.700 pixels from Link1 to Link3
*/
(function()
{
      window.setTimeout = window.setTimeout; //
})();

      var smoothScr = {
      iterr : 30, // set timeout miliseconds ..decreased with 1ms for each iteration
        tm : null, //timeout local variable
      stopShow: function()
      {
        clearTimeout(this.tm); // stopp the timeout
        this.iterr = 30; // reset milisec iterator to original value
      },
      getRealTop : function (el) // helper function instead of jQuery
      {
        var elm = el; 
        var realTop = 0;
        do
        {
          realTop += elm.offsetTop;
          elm = elm.offsetParent;
        }
        while(elm);
        return realTop;
      },
      getPageScroll : function()  // helper function instead of jQuery
      {
        var pgYoff = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
        return pgYoff;
      },
      anim : function (id) // the main func
      {
        this.stopShow(); // for click on another button or link
        var eOff, pOff, tOff, scrVal, pos, dir, step;

        eOff = document.getElementById(id).offsetTop; // element offsetTop

        tOff =  this.getRealTop(document.getElementById(id).parentNode); // terminus point 

        pOff = this.getPageScroll(); // page offsetTop

        if (pOff === null || isNaN(pOff) || pOff === 'undefined') pOff = 0;

        scrVal = eOff - pOff; // actual scroll value;

        if (scrVal > tOff) 
        {
          pos = (eOff - tOff - pOff); 
          dir = 1;
        }
        if (scrVal < tOff)
        {
          pos = (pOff + tOff) - eOff;
          dir = -1; 
        }
        if(scrVal !== tOff) 
        {
          step = ~~((pos / 4) +1) * dir;

          if(this.iterr > 1) this.iterr -= 1; 
          else this.itter = 0; // decrease the timeout timer value but not below 0
          window.scrollBy(0, step);
          this.tm = window.setTimeout(function()
          {
             smoothScr.anim(id);  
          }, this.iterr); 
        }  
        if(scrVal === tOff) 
        { 
          this.stopShow(); // reset function values
          return;
        }
    }
 }

Ответ 6

Современные браузеры поддерживают CSS свойство "scroll-поведения: smooth". Поэтому нам даже не нужен Javascript для этого. Просто добавьте это к элементу body и используйте обычные якоря и ссылки. MDN-документы с прокруткой

Ответ 7

Недавно я решил решить эту проблему в ситуации, когда jQuery не был вариантом, поэтому я регистрирую свое решение здесь только для потомков.

var scroll = (function() {

    var elementPosition = function(a) {
        return function() {
            return a.getBoundingClientRect().top;
        };
    };

    var scrolling = function( elementID ) {

        var el = document.getElementById( elementID ),
            elPos = elementPosition( el ),
            duration = 400,
            increment = Math.round( Math.abs( elPos() )/40 ),
            time = Math.round( duration/increment ),
            prev = 0,
            E;

        function scroller() {
            E = elPos();

            if (E === prev) {
                return;
            } else {
                prev = E;
            }

            increment = (E > -20 && E < 20) ? ((E > - 5 && E < 5) ? 1 : 5) : increment;

            if (E > 1 || E < -1) {

                if (E < 0) {
                    window.scrollBy( 0,-increment );
                } else {
                    window.scrollBy( 0,increment );
                }

                setTimeout(scroller, time);

            } else {

                el.scrollTo( 0,0 );

            }
        }

        scroller();
    };

    return {
        To: scrolling
    }

})();

/* usage */
scroll.To('elementID');

Функция scroll() использует раскрывающий шаблон модуля, чтобы передать идентификатор целевого элемента своей функции scrolling() через scroll.To('id'), который устанавливает используемые значения с помощью функции scroller().

Структура

В scrolling():

el: целевой объект DOM
elPos: возвращает функцию через elememtPosition(), которая при каждом вызове дает позицию целевого элемента относительно верхней части страницы.
duration: время перехода в миллисекундах.
increment: делит начальную позицию целевого элемента на 40 шагов.
time: устанавливает время каждого шага.
prev: предыдущее положение целевого элемента в scroller().
E: удерживает позицию целевого элемента в scroller().

Фактическая работа выполняется с помощью функции scroller(), которая продолжает называть себя (через setTimeout()), пока целевой элемент не окажется в верхней части страницы, или страница не сможет прокручивать больше.

Каждый раз, когда вызывается scroller(), он проверяет текущую позицию целевого элемента (удерживается в переменной E), и если это > 1 OR < -1, и если страница по-прежнему прокручивается, сдвигает окно на increment пикселей - вверх или вниз, если E - положительное или отрицательное значение. Если E не является ни > 1 OR < -1, либо E === prev, функция останавливается. Я добавил метод DOMElement.scrollTo() при завершении, чтобы убедиться, что целевой элемент был взломан в верхней части окна (а не то, что вы заметили бы его на части пикселя!).

Оператор if в строке 2 из scroller() проверяет, прокручивается ли страница (в тех случаях, когда цель может находиться в нижней части страницы, а страница не может прокручиваться дальше), проверив E против его предыдущего положения (prev).

Тройное условие ниже его уменьшает значение increment, поскольку E приближается к нулю. Это останавливает переполнение страницы в одну сторону, а затем отскакивает назад, чтобы перерегулировать другую, а затем отскакивает назад, чтобы перевернуть другую, стиль пинг-понга, до бесконечности и за ее пределами.

Если ваша страница больше, чем c.4000px, вы можете увеличить значения в первом термином выражении (здесь на +/- 20) и/или делителе, который устанавливает значение increment (здесь в 40).

Играя с duration, делителем, который устанавливает increment, а значения в тройном состоянии scroller() должны позволять вам настраивать функцию в соответствии с вашей страницей.

JSFiddle
N.B. Проверено в современных версиях Firefox и Chrome на Lubuntu, а также Firefox, Chrome и IE на Windows8.

Ответ 8

Я сделал что-то вроде этого. Я не знаю, работает ли он в IE8. Протестировано в IE9, Mozilla, Chrome, Edge.

function scroll(toElement, speed) {
  var windowObject = window;
  var windowPos = windowObject.pageYOffset;
  var pointer = toElement.getAttribute('href').slice(1);
  var elem = document.getElementById(pointer);
  var elemOffset = elem.offsetTop;

  var counter = setInterval(function() {
    windowPos;

    if (windowPos > elemOffset) { // from bottom to top
      windowObject.scrollTo(0, windowPos);
      windowPos -= speed;

      if (windowPos <= elemOffset) { // scrolling until elemOffset is higher than scrollbar position, cancel interval and set scrollbar to element position
        clearInterval(counter);
        windowObject.scrollTo(0, elemOffset);
      }
    } else { // from top to bottom
      windowObject.scrollTo(0, windowPos);
      windowPos += speed;

      if (windowPos >= elemOffset) { // scroll until scrollbar is lower than element, cancel interval and set scrollbar to element position
        clearInterval(counter);
        windowObject.scrollTo(0, elemOffset);
      }
    }

  }, 1);
}

//call example

var navPointer = document.getElementsByClassName('nav__anchor');

for (i = 0; i < navPointer.length; i++) {
  navPointer[i].addEventListener('click', function(e) {
    scroll(this, 18);
    e.preventDefault();
  });
}

Описание

pointer -get элемент и chceck, если он имеет атрибут "href", если "да", избавиться от "#"
elem -переменная переменная без "#"
elemOffset -offset элемента "прокрутить до" в верхней части страницы

Ответ 9

Ты можешь использовать

document.querySelector('your-element').scrollIntoView({behavior: 'smooth'});

Если вы хотите прокрутить верхнюю часть страницы, вы можете просто поместить пустой элемент в верхнюю часть и сгладить прокрутку к ней.

Ответ 10

Вы также можете использовать свойство Scroll Behavior. например, добавьте строку ниже к вашему CSS

html{
scroll-behavior:smooth;
}

Ответ 11

<script>
var set = 0;

function animatescroll(x, y) {
    if (set == 0) {
        var val72 = 0;
        var val73 = 0;
        var setin = 0;
        set = 1;

        var interval = setInterval(function() {
            if (setin == 0) {
                val72++;
                val73 += x / 1000;
                if (val72 == 1000) {
                    val73 = 0;
                    interval = clearInterval(interval);
                }
                document.getElementById(y).scrollTop = val73;
            }
        }, 1);
    }
}
</script>

x= scrollTop
y= id div, который используется для прокрутки

Примечание. Чтобы заставить тело прокручиваться, дайте телу идентификатор.

Ответ 12

Вы можете использовать цикл for с окнами window.scrollTo и setTimeout для прокрутки с помощью простого Javascript. Чтобы прокрутить элемент с scrollToSmoothly функции scrollToSmoothly: scrollToSmoothly(elem.offsetTop) (при условии, что elem является элементом DOM). Вы можете использовать это для плавного перехода на любую позицию y в документе.

function scrollToSmoothly(pos, time){
/*Time is only applicable for scrolling upwards*/
/*Code written by hev1*/
/*pos is the y-position to scroll to (in pixels)*/
     if(isNaN(pos)){
      throw "Position must be a number";
     }
     if(pos<0){
     throw "Position can not be negative";
     }
    var currentPos = window.scrollY||window.screenTop;
    if(currentPos<pos){
    var t = 10;
       for(let i = currentPos; i <= pos; i+=10){
       t+=10;
        setTimeout(function(){
        window.scrollTo(0, i);
        }, t/2);
      }
    } else {
    time = time || 2;
       var i = currentPos;
       var x;
      x = setInterval(function(){
         window.scrollTo(0, i);
         i -= 10;
         if(i<=pos){
          clearInterval(x);
         }
     }, time);
      }
}

Демо-версия:

<button onClick="scrollToDiv()">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element<p/>
<button onClick="scrollToSmoothly(Number(0))">Scroll back to top</button>
</div>
<script>
function scrollToSmoothly(pos, time){
/*Time is only applicable for scrolling upwards*/
/*Code written by hev1*/
/*pos is the y-position to scroll to (in pixels)*/
     if(isNaN(pos)){
      throw "Position must be a number";
     }
     if(pos<0){
     throw "Position can not be negative";
     }
    var currentPos = window.scrollY||window.screenTop;
    if(currentPos<pos){
    var t = 10;
       for(let i = currentPos; i <= pos; i+=10){
       t+=10;
        setTimeout(function(){
      	window.scrollTo(0, i);
        }, t/2);
      }
    } else {
    time = time || 2;
       var i = currentPos;
       var x;
      x = setInterval(function(){
         window.scrollTo(0, i);
         i -= 10;
         if(i<=pos){
          clearInterval(x);
         }
     }, time);
      }
}
function scrollToDiv(){
  var elem = document.querySelector("div");
  scrollToSmoothly(elem.offsetTop);
}
</script>

Ответ 13

Вот мое решение. Работает в большинстве браузеров

document.getElementById("scrollHere").scrollIntoView({behavior: "smooth"});

Документы

document.getElementById("end").scrollIntoView({behavior: "smooth"});

body {margin: 0px; display: block; height: 100%; background-image: linear-gradient(red, yellow);}
.start {display: block; margin: 100px 10px 1000px 0px;}
.end {display: block; margin: 0px 0px 100px 0px;}

<div class="start">Start</div>
<div class="end" id="end">End</div>