Highlighting target element

Written byPhuoc Nguyen

Created

28 Aug, 2023

Do you want to draw your users' attention to a specific element on your webpage when they scroll to it? Highlighting that element could be the perfect solution. In this post, we'll show you how to create an animation that highlights your target element.

#Anchor elements

To scroll to a specific element on a page, there are two common ways to do it. You can either use JavaScript DOM APIs like `window.scrollTo` or `window.scrollTop` to update the scroll position, or you can use the `id` attribute of the target element.

The second approach is better for accessibility because you can share direct links. For example, let's say we have a section with the `id` of `section-1`.

html

<div id="section-1">...</div>

To access the section, we can use a direct link that looks like `http://example.com/path/to/page#section-1`. When you load the URL, the browser will automatically jump to the section you want to see. It's that simple!

Many websites now attach IDs to their headings, like this:

html

<h2 id="section">...</h2>

We can easily navigate to different sections of a web page by using the target's id attribute, preceded by a `#` character.

html

<a href="#section-1">Go to section 1</a>

#:target pseudo-class

Let's dive into the `:target` pseudo-class in CSS. This powerful tool lets you select and style the element that's currently being targeted by the URL's fragment identifier (the part of the URL after the # symbol).

To add some style to the targeted element, simply use the `:target` pseudo-class. For example, you could highlight the background color of the targeted section using this CSS code:

css

:target {
    animation: highlight 3s ease-in-out;
}
@keyframes highlight {
    from {
        background-color: rgb(253 224 71);
    }
    to {
        background-color: #fff;
    }
}

In this example, we'll animate the background color of the selected element. It'll start as `rgb(253 224 71)` and smoothly transition to white over three seconds.

#Usages

Let's take a look at a real-life situation where the highlight animation could come in handy. You can see this example on any Wikipedia page. Every article on Wikipedia (like this CSS page) typically has many reference notes that provide additional content. When you click on a reference note, also known as a cite note, the page will automatically scroll down to its corresponding reference section.

html

<sup id="ref-1" class="reference">
    <a href="#note-1">[1]</a>
</sup>

To enhance users' navigation experience, each reference section also includes a link that allows them to jump back to the original citation note.

html

<div id="note-1">
    <a href="#ref-1" title="Jump up">^</a>
    <!-- Content of the note goes here ... -->
</div>

In the sample code above, you'll notice that there's a cite note and its reference, and both of them have an `id` attribute.

Check out the demo below, which uses the animation from the previous section to highlight either the reference or the cite node, depending on which one is the current target.

A small secret

When you play with the demo above and click on a note and reference, it will scroll to the target, but you won't see the corresponding ID attribute in the browser's address. This happens because the demo lives in its own iframe.

The code below is used within the iframe:
js
document.addEventListener('DOMContentLoaded', () => {
  const anchors = document.querySelectorAll('a.anchor');
  const iframeDocument = document.body.ownerDocument;
  [...anchors].forEach((noteEle) => {
      anchorEle.addEventListener('click', (e) => {
          e.preventDefault();
          iframeDocument.location.hash = anchorEle.getAttribute('href').slice(1);
      });
  });
});
The code sample manages click events for all anchors within an iframe. In the event handler, we prevent the default behavior of scrolling to the target of the outer page, instead of the iframe itself.

Additionally, it updates the window's hash that the iframe belongs to, based on the `href` attribute of each anchor.

In simple terms, using the `id` attribute, this code allows for navigation inside an iframe to function just like on a regular webpage.

#Keeping a highlighted element until clicking outside of it

If you want to keep an element highlighted until the user clicks outside of it, you'll need a little help from JavaScript. One approach is to handle the click event of the entire page and determine if the user clicks outside of the target element. If they do, you can remove the highlight styles from the target by removing the hash from the URL.

You can check out this feature on GitHub by simply navigating to any comments of a specific issue.

Here's some sample code that demonstrates this approach:

document.addEventListener('click', (e) => {
    const clickedEle = e.target;

    // Get the current hash
    const hash = window.location.hash;
    if (!hash) {
        return;
    }

    const id = hash.slice(1);
    const targetEle = document.getElementById(id);
    if (targetEle && !targetEle.contains(clickedEle)) {
        // Users click outside the target
        // Update the hash
        window.location.hash = '';
    }
});

In the same code above, we find the `id` attribute from the hash and locate the element that shares the same `id` attribute. If the clicked element is not contained within the target element, meaning that the user has clicked outside of it, we reset the hash to empty. This results in the removal of the `:target` styles from the currently highlighted element.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Highlighting target element

#Anchor elements

#:target pseudo-class

#Usages

#Keeping a highlighted element until clicking outside of it

Questions? 🙋

Recent posts ⚡

Newsletter 🔔