jquery scrollTop() method

Question

I'm testing out some jquery in jsfiddle and I have the following code

CSS

html, body {
    height: 1000px;
}

JQUERY

$(document).ready(function() {
   $('.test')scrollTop(500);
});

HTML

<div class="test">
 <h1>hello world</h1>
</div>

Everything appears to be correct according to documentation, but for some reason its not re-positioning my view.... Thanks for the help

UPDATE Had typo

Answer 1

scrollTop will only scroll if the target element has a scrollbar. In order to scroll in your example, you need to force the content of the test div to overflow it's content, for example:

$(document).ready(function() {
    $( ".test" ).scrollTop( 300 );
});

/* Give test a fixed height so that it overflows */
.test {
    height: 200px;
    overflow: scroll;
}
/* Give the inner container a height which exceeds .test */
.inner {
    height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
    <div class="inner">
        <h1>lalala</h1>
        <p>Hello</p>
    </div>
</div>

Answer 2

instead of

$('.test.')scrollTop(500);

use

$('.test').scrollTop(500);