JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<div id="source">click me - jumps to target (basic)</div>
<div id="target-basic">target (basic)</div>

<div id="target-data-1" data-scroll="target-data-3">click me 1 - jumps to 3 (data attribute)</div>
<div id="target-data-2" data-scroll="target-data-1">click me 2 - jumps to 1 (data attribute)</div>
<div id="target-data-3" data-scroll="target-data-2">click me 3 - jumps to 2 (data attribute)</div>

SCSS

html, body, div {
  height: 100%;
  margin: 0;
}

#source {
  background: #000;
  color: #fff;
}
#target-data-1 {
  background: red;
}
#target-data-2 {
  background: green;
}
#target-data-3 {
  background: blue;
}

JavaScript

// basic implementation
var el = document.getElementById("source");
var target = document.getElementById("target-basic");

el.addEventListener("click", function(e) {
target.scrollIntoView({
 	behavior: "smooth"
 }, false)
})


// data attribute implementation
var els = document.querySelectorAll('[data-scroll]');

for (i = 0; i < els.length; i++) {
  els[i].addEventListener("click", function(event) {
  	var targetID = this.dataset.scroll;
    var target = document.getElementById(targetID);
    target.scrollIntoView({
    	behavior: "smooth"
    })
  }, false)
}