如何在模态内不使用jQuery的情况下平滑滚动到给定id的元素

Question

所以我有一个onclick事件的代码，它将以纯Javascript（无jquery）平滑滚动到给定id的元素，现在我想在模式中实现它。

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：滚动，当单击事件触发时，我希望该模式平稳滚动到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' 
});

参考： https : //css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 2

众所周知，这就是窍门。

的CSS

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

Java脚本

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>