Sometimes we have tall pages and we need to scroll down to find the section that we want to see. This process can be automated using links and targets.
Introduction
Sometimes we have tall pages and we need to scroll down to find the section that we want to see. This process can be automated using links and targets.
Getting Started
We can have a text area somewhere in the top to serve as a navigation menu with many triggers. A single trigger might look like this, but any p, a, div and span tags can work the same way:
<a id='sec1btn'>Go to section 1</a>
Then we can add an event listener to these elements with javascript to bind the onclick event to the sec1btn
document.getElementById('sec1btn').addEventListener('click', function() { document.querySelector('#section1').scrollIntoView({behavior: 'smooth'}) })
or directly on the html markup:
<a onclick="document.querySelector('#section4').scrollIntoView({behavior: 'smooth'});">section 4</a>
Then we can add textareas down the page to specify the target section to scroll at.
<div id="section1">this is section 1</div>
If html sanitation is on, we can wrap the unsupported html code with the
<code> tag and run a script to parse it:
<code> <button onclick="document.querySelector('#section1').scrollIntoView({behavior: 'smooth'});">section 1</button> <span onclick="document.querySelector('#section2').scrollIntoView({behavior: 'smooth'});">section 2</span> : : <a onclick="document.querySelector('#sectionN').scrollIntoView({behavior: 'smooth'});">section N</a> </code>
the script to parse the unsupported html code is simple:
//parse code to html
document.querySelectorAll("code").forEach(e =>{e.innerHTML = e.innerText})
Note: This workaround only works when html sanitization is on. You can tell if html sanitization is on if it shows that some tags are not supported. Please be careful using this workaround because the <code> tag might not be supported in the future.
Recommended Comments
There are no comments to display.