As the title says, I want the page to scroll down to an image when I search for it on my search bar.

This is the HTML for the search bar/button: 

```
<form id="search-form" href="#test1" class="smoothscroll">
    <input type="text" id="searchText"/>
    <input type="button" value="Search" id="searchButton"/>
</form>

```

This is the `<img>` and `<div>` tag I'm trying to scroll to:

```
<a href="test1.html" style="text-decoration: none">
    <img src="pic1.png" height="150px" width="150px"/>
    <img src="pic2.png" id="id1"/>
</a>

```

And here is my jQuery: 

```
$(document).ready(function () {
    $( "#searchButton" ).click(function() {
        //var text = document.getElementById('searchText').value;
        $( "html, body" ).animate({     
            scrollTop: ($('#test1').offset().top)
        }, 2000);
    });
});

```

I keep getting this error message:

> 
> Uncaught TypeError: Cannot read property 'top' of undefined 
> 
> 
> 

Thanks for helping :)