Jquery or css highlight div on anchor jump/scroll

anchor, jquery

Solution

Oh ok, I think I get what you want to do: you want to scroll to the referenced element in the link and apply a style to this element (BTW, it is an `#` in the `<a href="#id1">`).

The code should then rather 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 in order to use `jQuery` rather than `$`.

Problem

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

Original source