Interation and creation

Iterates and gets all data-anchor values and those elements content and creates links based on that.

HTML

<!-- 
Source of this fiddle: https://stackoverflow.com/questions/52563502/pure-js-store-list-of-data-attributes-in-array-then-iterate
Thought: This is an example of how you can autogenerate a list of links based on the titles in a page. Thus, creating anchors to those titles. Further work on this is meant to achieve a page position indicator to the page reader, with the twist that the moving dot in the dot list, should be a layer beneath, so it gives the effect or looking into a column of the game "4-in-a-row".. You can hide the background color of "a.anchorLink" to see what I mean
-->
  
  <div id="contentLayer">
  	This is the content layer<br>
	  <div id="firstAnchor" data-anchor="firstAnchor" class="anchor">First title</div>
  		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  	<div id="seondAnchor" data-anchor="secondAnchor" class="anchor">Second title</div>
  	  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  	<div id="secondAnchor" data-anchor="thirdAnchor" class="anchor">Third title</div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

<div id="alignLinks">
	<div id="anchorLinks"></div>
</div>

This is the background layer

CSS

body {
	background: #1c0714;
	color: #efbed6;
}

div#alignLinks {
	position: absolute;
	top: 0;
	right: 60px;
	background: rgba(255,0,0,.0);
	top: 30px;
	height: calc(100% - 60px);
	width: 36px;
	display: flex;
	flex-flow: column;
	align-items: flex-end;
	z-index: 3;
}

div#anchorLinks {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-flow: column;
	height: auto;
	width: 50px;
	position: absolute;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	background-image: url(http://i65.tinypic.com/vzxwe9.png);
	background-repeat: repeat-y;
	background-position-x: 14px;
}

a.anchorLink {
    height: 36px;
    width: 36px;
    background: rgba(255,255,0,.1);
    border-radius: 500px;
}

div#contentLayer {
	position: absolute;
	display: flex;
	flex-flow: column;
	height: calc(100% - 60px);
	width: calc(100% - 60px);
	left: 30px;
	top: 30px;
	overflow: auto;
	box-sizing: border-box;
	background-image: url(http://i67.tinypic.com/erhk3p.png);
	z-index: 3;
}

.anchor {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 400;
}




div#contentLayer::-webkit-scrollbar {
	border-radius: 5px;
	background: transparent url('transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
	border: 0px solid red;
	width: 14px;
	height: 14px !important;
}

div#contentLayer::-webkit-scrollbar-button {
	display: none; /* DON'T display the top/bottom/left/right arrows */
}

div#contentLayer::-webkit-scrollbar-thumb {
	height: 6px;
	border: 4px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	-webkit-border-radius: 7px;
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

div#contentLayer::-webkit-scrollbar-thumb:hover {
	border-radius: 5px;
	background-color: rgba(0,0,0,.3);
}

div#contentLayer::-webkit-scrollbar-thumb:active {
	background-color:...

JavaScript

//By Barmar
(function create_anchor_link_list() {
	var anchors = document.querySelectorAll('[data-anchor]');
	var anchorLinks = document.querySelector("#anchorLinks");
	anchors.forEach(function(d) {
		var a = document.createElement('a');

		a.href = "#" + d.id;

		/* replaced this with title attribute instead
		a.textContent = 'Link to ' + d.textContent.toLowerCase(); */
		a.setAttribute("title", d.textContent);

		anchorLinks.appendChild(a);

		//modified from Barmars example to fit design (so they can be styled easily)
		a.setAttribute("class", "anchorLink");

	});
})();