How to scroll position div by an image

Question

I’m using a script that when triggered positions me in a div specific, is working, but the code I have does it from a link text and I am trying to adapt it to an image and that it is positioned above another div. The picture of what I need is this:

The script I have is this:

What triggers:

    <a href="#bottom" id="top">Clique para Posiconar</a>

What position:

$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top
    }, 1000);
}

});

The page with the code in operation so far can be seen here:

Example

Answer 1

To do the same with a div, you can insert an attribute like "data-href" and base on it. It would look like this:

$('.classe_da_div'). on('click', Function(Event) { var target = $( $(this).attr('data-href') ); Event.preventDefault(); $('html, body'). Animate({ scrollTop: target.offset(). top }, 1000); });