21

Есть отличный скрипт плавной прокрутки на jQuery.

var $page = $('html, body');
$('a[href*="#"]').click(function() {
    $page.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 400);
    return false;
});

Как можно отобразить на чистом JS?

2
  • ассоциация: stackoverflow.com/questions/10063380/…
    – Crantisz
    7 июн 2017 в 7:57
  • @Shperung отметьте пожалуйста другой мой ответ как принятый, в современных условиях это уже не актуально, только вводит людей в заблуждение 24 янв 2020 в 10:19

6 ответов 6

27

Есть еще стандартный способ плавной прокрутки Element.scrollIntoView().

const anchors = document.querySelectorAll('a[href*="#"]')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
    e.preventDefault()
    
    const blockID = anchor.getAttribute('href').substr(1)
    
    document.getElementById(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
}
h2 {
  margin-bottom: 100vh;
}
<ul>
  <li><a href="#head1">head 1</a>
  <li><a href="#head2">head 2</a>
  <li><a href="#head3">head 3</a>
  <li><a href="#head4">head 4</a>
</ul>

<h2 id="head1">heading 1</h2>
<h2 id="head2">heading 2</h2>
<h2 id="head3">heading 3</h2>
<h2 id="head4">heading 4</h2>

1
  • почему может не работать? 12 июн 2020 в 17:49
18

// собираем все якоря; устанавливаем время анимации и количество кадров
const anchors = [].slice.call(document.querySelectorAll('a[href*="#"]')),
      animationTime = 300,
      framesCount = 20;

anchors.forEach(function(item) {
  // каждому якорю присваиваем обработчик события
  item.addEventListener('click', function(e) {
    // убираем стандартное поведение
    e.preventDefault();
    
    // для каждого якоря берем соответствующий ему элемент и определяем его координату Y
    let coordY = document.querySelector(item.getAttribute('href')).getBoundingClientRect().top + window.pageYOffset;
    
    // запускаем интервал, в котором
    let scroller = setInterval(function() {
      // считаем на сколько скроллить за 1 такт
      let scrollBy = coordY / framesCount;
      
      // если к-во пикселей для скролла за 1 такт больше расстояния до элемента
      // и дно страницы не достигнуто
      if(scrollBy > window.pageYOffset - coordY && window.innerHeight + window.pageYOffset < document.body.offsetHeight) {
        // то скроллим на к-во пикселей, которое соответствует одному такту
        window.scrollBy(0, scrollBy);
      } else {
        // иначе добираемся до элемента и выходим из интервала
        window.scrollTo(0, coordY);
        clearInterval(scroller);
      }
    // время интервала равняется частному от времени анимации и к-ва кадров
    }, animationTime / framesCount);
  });
});
h2 {
  margin-bottom: 100vh;
}
<ul>
  <li><a href="#head1">head 1</a>
  <li><a href="#head2">head 2</a>
  <li><a href="#head3">head 3</a>
  <li><a href="#head4">head 4</a>
</ul>

<h2 id="head1">heading 1</h2>
<h2 id="head2">heading 2</h2>
<h2 id="head3">heading 3</h2>
<h2 id="head4">heading 4</h2>

10

Кросплатформенный вариант:

currentYPosition - определяет текущее положение скрола

elmYPosition - определяет положение элемента

smoothScroll - собственно сама функция.

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++;
    }
}

Ответ взят отсюда

Упрощенная версия, когда надо просто проскролить к определенной позиции

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);
}

Ответ взят отсюда

2
  • У вас в коде есть конструкция if (self.pageYOffset) , разве не можна if (pageYOffset) ?
    – Shperung
    18 июл 2017 в 11:36
  • Это не мой код, это из ответа на англ. версии. Фишка в том, чтобы это правильно сработало во всех браузерах.
    – Crantisz
    19 июл 2017 в 14:03
3
var nodeObj = document.querySelector('.button-node');

nodeObj.scrollIntoView({
   behavior: "smooth",
   block:    "start" 
});
1
  • такой ответ уже есть. 12 фев 2019 в 9:01
1
 const anim = (sel, duration) => {
  let to = document.querySelector(sel).getBoundingClientRect().top,
      temp;

  return (sel) => {
      cancelAnimationFrame(temp); 
      var start = performance.now(); 
      var from = window.pageYOffset || document.documentElement.scrollTop;        
      requestAnimationFrame(function step(timestamp) {
          var progress = (timestamp - start) / duration;
          1 <= progress && (progress = 1);
          window.scrollTo(0, from + to * progress | 0);  
          1 > progress && (temp = requestAnimationFrame(step))
      });
  }

}
0
const scrollWindow = () => {
// На сколько пикселей будет прокручиваться страница
    let scrolled;
    let timer;
//  Через сколько действие будет повторяться

//  Получаем еэлемент через ID
    document.getElementById(IDelemen).onclick = function(){
        scrolled = window.pageYOffset;
// Определяем место положение скролла на странице
    
// запуск функции    
        scrollToTop(); 
    }
//  Сама функции
    function scrollToTop(){
// Если положение скрола не вверху страницы
        if (scrolled > 0) {
//Скролим вверх 
            window.scrollTo(0, scrolled);
// Скроллим веерх (отнимаем кол-во пикселей от текущего значения) 
            scrolled = scrolled - 50; //100 - скорость прокрутки
            timer = setTimeout(scrollToTop, 200); //время повторения
// Через какое время запустить повторную проверку
// Повторение будет продолжаться, пока scrolled не станет - 0
        }
        else {
            clearTimeout(timer);
            window.scrollTo(0,0);
//Останавливаем по достижению верха страницы
        }
    }
}
// Вызов функкции
scrollWindow ();

// Регулировать плавность (прокрутной и повторением)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.