Autoscroll Div Background-color Change

Get Started
1

I have a menu that links to different divs on a single page using hash tags after the page name (i.e. my-page.html#section1).

After the user scrolls to whatever section of the page they selected how can I briefly change the background color of that div? Something like a 2 second flash.

The reason for this is that I want the user’s eyes to immediately go to the section they selected. The reason this may not happen sometimes is that there will be 2 section within the screen space.

Thanks for reading!

Sam

2

You can do this with some CSS3 (as well as JS, of course). Here is a CSS example, courtesy of Snook:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Target Fade</title>
	
<style type="text/css" media="all">
:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}</style>

<script type="text/javascript" src=""> </script>
	
</head>

<body>
<p>Click the link to <a href="#goal">target the div</a>. </p>
<p>Code courtesy of <a href="http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations">Snook</a></p>

<br>
<br>
<br>
<br>
<br>
<br>

<div id="goal">This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. </div>

</body>

</html>
3

This works perfectly! Thanks Ralph!