Scrollintoview trouble shooting

In this page, I'm trying to implement the scrollintoview() plugin. The expected behavior is for the plugin to take a command like $(ELEMENT).scrollintoview() and smoothly transition to that element, if it is not already visible. In addition, the plugin is expected to return results for the selector $(':scrollable'). On this page, I suspect because of something in the CSS, the plugin is not functioning and nothing is returned as $(':scrollable')

by beej

HTML

<script src="https://raw.github.com/litera/jquery-scrollintoview/master/jquery.scrollintoview.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
 </head>
<body class="background">
    <button>Click to scroll?</button>
    <div id="header-w">
        <div id="header">
                <a href="/"><img src="/templates/jt004_j16/images/logo.png" border="0" class="logo"></a>
                <div class="top">
        </div>          
</div>
<div id="main">
    <div id="wrapper">
                        <div id="navr"><div id="navl">
                            <div id="search">
                    <form action="/index.php/component/stormportal/" method="post">
    <div class="search">
        <input name="searchword" id="mod-search-searchword" maxlength="20"  class="inputbox" type="text" size="20" value="Search..."  onblur="if (this.value=='') this.value='Search...';" onfocus="if (this.value=='Search...') this.value='';" />    <input type="hidden" name="task" value="search" />
    <input type="hidden" name="option" value="com_search" />
    <input type="hidden" name="Itemid" value="0" />
    </div>
</form>
                </div>
            <div id="nav">
<ul class="menu-nav">
<li class="item-45 deeper parent"><a href="/" >Home</a><ul><li class="item-57"><a href="/index.php/home3/news7" >News</a></li><li class="item-99"><a href="/index.php/home3/history-of-mid" >History of  MID</a></li><li class="item-100"><a href="/index.php/home3/board-of-directors" >Board Members</a></li><li class="item-102"><a href="/index.php/home3/board-meetings-2" >Board Meetings</a></li><li class="item-103"><a href="/index.php/home3/water-season" >Water Season</a></li><li class="item-104"><a href="/index.php/home3/assessments" >Assessments</a></li><li class="item-180 deeper parent"><a href="/index.php/home3/services-top"...

CSS

/*
Design by http://JoomlaThemes.co
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {background: transparent;border: 0;font-style: inherit;font-weight: inherit;margin: 0;padding: 0;outline: 0;vertical-align: baseline;} table {border-collapse: collapse;border-spacing: 0;}

/* Main Layout */
html {height: 100%;}
body { font:normal 13px/1.8em Arial, Helvetica, sans-serif; color:#555; }
body.contentpane { background:#fff;}
.background {position: absolute;width: 100%; background:#042F62 url(../images/bg.jpg) top center no-repeat}
h1,h2,h3,h4,h5,h6 {margin:0; padding:10px 0; font-weight:bold; color:#4182BA;font-family:Arial, Helvetica, sans-serif;}
.componentheading { font-style:italic;font-size:25px; margin:0; padding:5px 0 10px 0; color:#4182BA;}
h1{font-size:25px;}
h2 {font-size:20px;}
h3 {font-size:16px;}
h4 {font-size:14px;} h5 {font-size:12px;} h6 {font-size:12px;}
a {color: #4182BA;text-decoration:none;}
a:hover {color:#7CA02D;text-decoration: underline;}
ul {margin:0 0 0 15px;}
p {margin-top: 0;margin-bottom: 10px;}
blockquote { background:#eee; border:3px solid #ccc; margin:5px; padding:5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; font-style:italic}
element.style { height:auto;}
hr { width:100%; clear:both; border:none; height:2px; background:#eee; margin:0; padding:0;}
.clr {clear: both;}

/* Header */
#search {position:absoltue; position:absolute; top:5px; right:10px;}
#search .button { margin:0 0 0 5px; padding:2px; background:#F4F4F4; color:#9a9a9a; border:1px solid #fff;}
#search .button:hover { background:#fff; color:#111;}
#search .search {}
#search .inputbox { background:#F4F4F4; color:#9a9a9a; border:1px solid #fff; padding:2px;}
#search .inputbox:hover { background:#fff; color:#111;}
#header { background:none;...

JavaScript

$('button').click(function() {
    $('#footer').scrollintoview();
});