Jquery or css highlight div on anchor jump/scroll

Question

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

than it scroll to <div id="id1">here</div> On this page I have lots of anchor links and div so it is very confusing to identify on which div then scrolled so better to highlight border on clicked anchor div. I tried below code but it doesn't 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 am not sure if it does required jquery ui or just jquery is enough

Answer 1

Consider using :target CSS pseudo element -

Demo

Demo with img:target

Check Browser Compatibility