Trigger a JS/Jquery transition in background color when an anchor is present

Question

How can one implement the type of background color changing that you see on stack overflow when you link directly to one of the answers via an a tag?

e.g.

https://stackoverflow.com/questions/821321/what-does-the-utmscr-or-utmcct-values-mean-in-reference-to-the-http-cookie-serve/#1401813

Note the #1401813 on the end is the answer id.

Navigating there will trigger the background color of the container to glow for a second, and return.

I have the ids set up on my containers, and the links working fine, in that the page jumps down to the appropriate area, but I am not sure how to use either pure js or jquery to realize there is a anchor reference in the url, and transition the background color into, and out of, a glow color for that container.

Anyone have any examples?

score 2 · Answer 1 · answered Jan 16 '18 at 01:54

This is actually quite easy. Simply read in the hash value via location.hash (remove the pound symbol if needed). Locate the related item via id, or class. Then you can animate the background color (i did it with jQuery UI). You can also change color via CSS 3 pretty easily.

$(document).ready(() => {
  $(window).bind('hashchange', function() {
    updateUrl();
  });
  
  function updateUrl(){
    $('.currentUrl').text(location);
    var selector = "." + location.hash.substr(1);
    $(selector)
      .css("backgroundColor","#aa0000")
      .css("color", "#fff")
      .animate({
          backgroundColor: "#fff",
          color: "#000",
        }, 1000 );
  }
  
  updateUrl();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="currentUrl"></div>
<a href="#asdfg">asdfg</a>
<a href="#qwert">qwert</a>
<a href="#zxcvb">zxcvb</a>
<div class="asdfg">Div with class asdfg</div>
<div class="qwert">Div with class qwert</div>
<div class="zxcvb">Div with class zxcvb</div>

Chris Riebschlager · Accepted Answer · 2018-01-16T02:16:05.107

Here's a pure JS/CSS implementation. For the sake of using JSFiddle, I'm setting the window.location.hash manually, but you'd fetch it the exact same way.

window.location.hash = "foo";

function highlight() {
  let id = window.location.hash.substr(1);
  let node = document.getElementById(id);
  if (node) {
    node.classList.add('flash');
  }
}
highlight();

You're simply reading the hash and finding if an element on your page has that ID. The substr is to snip the # out of the hash. Then you add a class to that element that has a CSS animation. In this case, changing the background to red, then back to its original color.

.flash {
  animation-name: redflash;
  animation-duration: 5s;
}

@keyframes redflash {
  from {
    background-color: #FF0000;
  }
  to {
    background-color: inherit;
  }
}

Here's a fiddle that shows it in action: https://jsfiddle.net/904tsLah/11/

And here's a fiddle that includes an implementation of how you could use that idea to navigate around a page. https://jsfiddle.net/904tsLah/18/

Trigger a JS/Jquery transition in background color when an anchor is present

2 Answers2