JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<div class="scrollable">
  
</div>

<div class="controls">
  <button type="button" id="btnInstantScroll">
    Instant scroll
  </button>
  
  <button type="button" id="btnDefaultScroll">
    Scroll using doc settings
  </button>
</div>

CSS

:root {
    scroll-behavior: smooth;
}

.scrollable {
  height: 2000px;
  background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
}

.controls {
  position: fixed;
  bottom: 0;
}

JavaScript

var root = document.querySelector(':root');
var btnInstantScroll = document.querySelector('#btnInstantScroll');
var btnDefaultScroll = document.querySelector('#btnDefaultScroll');

btnInstantScroll.addEventListener('click', function() {
	
  // Change scroll behavior
  root.setAttribute("style", "scroll-behavior: auto;");
  
  // Timeout ensues styles are applied before scrolling
  setTimeout(function() {
  	window.scrollBy(0,-250);
    root.removeAttribute("style");
  }, 0)
  
})

btnDefaultScroll.addEventListener('click', function() {
  window.scrollBy(0,-250);
})