Как создать плавную прокрутку к элементу данного идентификатора, внутри модального, БЕЗ jQuery

Question

Итак, у меня есть код для события onclick, которое приведет к плавной прокрутке в обычном (без jquery) Javascript до элемента с заданным идентификатором, теперь я хочу реализовать его в модальном режиме.

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


 elmnt = document.getElementById("example");
 scrollTo(document.body, elmnt.offsetTop, 600);

Для элемента с id = "example".У меня есть модальное с id = "myModal" со свойством CSS overflow-y: scroll, и когда срабатывает событие щелчка, я бы хотел, чтобы модальное плавно прокручивалось до элемента id = "poleTimeDiv".

Есть идеи?

Answer 1

Посмотрите, для этого есть встроенная функция CSS: scroll-behavior.

CSS

html {
  scroll-behavior: smooth;
}

JAVASCRIPT

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' <pre rel="HTML"><code markup="tt" class="language-markup">
});

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

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

ref: https://css -tricks.com / фрагменты / jquery / плавная прокрутка /

Answer 2

просто, чтобы мы все знали, это делает свое дело.

CSS

.scrollable-content {
    scroll-behavior:smooth;
}

Javascript

document.querySelector('poleTimeDiv').scrollIntoView({ behavior: 'smooth' });

Answer 3

Использование библиотеки плавной прокрутки без Jquery

body {

height: 700px;

}

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@14.0.0/dist/smooth-scroll.polyfills.min.js"></script>

<a data-scroll href="#bazinga">Click here</a>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="bazinga">Bazinga!</div>

<script>
	var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 500,
	  speedAsDuration: true
  });
</script>