JQuery or css highlight div on anchor jump / scroll

Question

I am trying to highlight a div by clicking on the anchor link. I mean, if I click on <a href="$id1" class="scroll">My link</a>

than scrolling to <div id="id1">here</div> On this page I have many links to the anchor and div, so it’s very difficult to determine which div is then scrolled better to highlight the border on the pressed anchor div. I tried the code below, but it does not work.

 <script type="text/javascript"> // anchor click jump scroll jQuery(document).ready(function(jQuery) { jQuery(".scroll").click(function(event){ event.preventDefault(); jQuery('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); jQuery(".scroll").click(function() { jQuery("#post-<?php echo get_the_ID(); ?>").css("border", "1px solid #ff0000").delay(1000).css("border", "none"); }; </script> 

I'm not sure if this requires jquery ui or just jquery.

Answer 1

Oh well, I think I'm getting what you want to do: you want to go to the link element in the link and apply style to that element (BTW, this is # in <a href="#id1"> ).

Then the code should be:

 jQuery(document).ready(function() { jQuery(".scroll").click(function(event){ var $target = jQuery(this.hash); event.preventDefault(); jQuery('html,body').animate({scrollTop:$target.offset().top}, 500); $target.css("border", "1px solid #ff0000").delay(1000).css("border", "none"); }); }); 

Edited to use jQuery , not $ .

Answer 2

Consider using :target CSS pseudo-element -

Demo

Demo with img: target

Check browser compatibility