javascript: scroll to top of page if div becomes visible?

Question

I am using the following javascript to check to see if my div is visible and if it is then scroll to the top of the page?

jquery.php

<script>
$(document).ready(function() {
if ($(".message_box_prompt").is(":visible"); ) {
$(".message_box_prompt").scrollintoview();       
    });
});
</script>

My div message_box_prompt is being echoed out using a session after my MySQL query executes:

MySQL / process.php

    $_SESSION['message'] = '<div class="message_box_prompt"><div class="boxclose2" id="boxclose2" style="float:right; margin:10px; cursor:pointer; cursor:hand;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div><div class="message_box_text"><strong>Oooops!</strong> Your account is Limited. You cannot make changes to your account at this time.</div></div>';
header('Location: ' . $_SERVER['HTTP_REFERER']);

my session is echoed in my index.php page which includes my jquery.php file

index.php:

<?php include 'jquery.php';?>
<?php if (isset($_SESSION['message'])) {
echo $_SESSION['message'];
unset($_SESSION['message']); } ?>  

At the moment my div is being displayed through the session but the javascript won't work and my page wont scroll to the top of the page where my div is when it's on show. Please can someone show me where I am going wrong? thanks

Answer 1

I don't think there's a scrollintoview method in jQuery. You can use native JS method, but you need a DOM Node reference, not a jQuery object. Also take note of the capitalization:

$(function() {
    if ($(".message_box_prompt").is(":visible") ) {
       $(".message_box_prompt").get(0).scrollIntoView();       
    }
});

http://jsfiddle.net/2gazue6d/

IF you use scrollIntoView jQuery plugin the capitalization is also important.