<a> link to nearest object of a defined class - html

Question

So I would like to have a link that would point to the nearest element with the class ".example" on their screen. I know you can have links pointing to unique IDs on the page setting the href to #uniqueID I just want to know if that is possible with classes

Answer 1

You'd need to use JavaScript for this. Assuming that by 'nearest element... on their screen' you mean the element with the smallest vertical distance to the clicked link.
A quick way to do this would be looping through each element with the class example, finding the one with the smallest distance, and scrolling it into view:
<script>
function toNearestExample(clicked_element) {
// first we get all elements of 'example' class
var examples = document.getElementsByClassName("example");
// now we find the index of the element nearest to the clicked element
// to do this we go through each element in this list, and find the closest vertical distance from the clicked element
var smallest = Math.abs(clicked_element.getBoundingClientRect().top - examples[0].getBoundingClientRect().top);
var indexOfSmallest = 0;
for(var i=1;i<examples.length;i++) { // for each element with class 'example'
// calculate vertical distance
var verticalDistance = Math.abs(clicked_element.getBoundingClientRect().top - examples[i].getBoundingClientRect().top);
if (verticalDistance < smallest) {
smallest = verticalDistance;
indexOfSmallest = i;
}
}
// once we have that, we can scroll it into view
examples[indexOfSmallest].scrollIntoView();
}
</script>
Now all we have to do is call this function when your element is clicked, making sure to pass the element that clicked it:
<a onclick="toNearestExample(this);">click me!</a>
Of course, you could easily modify the code for elements with distances other than vertical.
An issue with this method is that it will get slow as you add more and more example elements onto the page. Unless your <a> tag will be moving around the page, it would be better to just hardcode this in for performance or to prevent issues with different window sizes.