"Basic HTML5 Site Template w/ JavaScript Form validation Using RegEx"
Bootstrap 3.3.0 Snippet by blayderunner123

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="masthead"> <div class="container"> <header class="row col-xs-12 col-md-8 col-md-offset-2" style="margin-top:15%;"> <h1 class="text-center text-white">Basic HTML5 Site Template</h1> <h2 class="text-center text-white" style="margin-top:1%"> <div class="row"> Includes: Bootstrap v3.3.7 Front-end Framework; jQuery v2.1.3; jQuery-Easing v1.4.1; jQuery-Validator v10.3.0 </div> <hr> <div class="row col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3"> <a type="button" class="btn btn-dark btn-block btn-lg">Button</a> </div> </h2> </header> </div> </div> <div class="container-fluid"> <div class="row section-header"> <h2 class="text-center">Section One</h2> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-md-offset-1 col-md-7"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><strong>Bootstrap Form</strong></h3> </div> <div class="panel-body"> <section> <form name="myForm" class="form" onsubmit="return checkForm()" method="post"> <div class="form-group"> <span class="help-block"><span class="text-danger">*</span>Denotes required field</span> </div> <div class="form-group"> <label for="email">Email address <span class="bold text-danger">*</span></label> <input name="emInput" class="form-control" id="email" type="email" pattern=" (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])" placeholder="FistName.LastName@Email.com" minlength="8" maxlength="32" required /> <span class="help-block">Email address <strong>MUST</strong> must contain @domain | .org | .com | .info | .biz | .net | .mil</span> </div> <div class="form-group"> <label for="exampleInputPassword1">Password <span class="bold text-danger">*</span></label> <input name="pwInput" type="password" class="form-control" id="exampleInputPassword1" minlength="16" maxlength="50" pattern="^(?=(.*\d){2})(?=(.*[a-zA-Z]){2})(?=(.*[!@#$%]){2})[0-9a-zA-Z!@#$%]{16,}" placeholder="01Your!@Password" /> <span class="help-block">Password <strong>MUST</strong> contain a minimum of 16 Characters with: <span class="bold">(2)UpperCase, (2)LowerCase, (2)Number, (2)Special Characters</span></span> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" id="mySubmit" class="btn btn-primary">Submit</button> </form> <script> function checkForm(form) { // validation fails if the input is blank var formInputs = document.getElementsByTagName("input"); var x = document.forms["myForm"]["emInput"].value; var y = document.forms["myForm"]["pwInput"].value; if(x == "") { alert("Error: Email is empty!"); return false; document.getElementById('mySubmit').setAttribute("disabled","disabled"); x.setAttribute("invalid", "invalid"); x.removeAttribute("valid"); } else if(y == "") { alert("Error: Password is empty!"); return false; document.getElementById('mySubmit').setAttribute("disabled","disabled"); y.setAttribute("invalid", "invalid"); x.setAttribute("invalid", "invalid"); y.removeAttribute("valid"); } else{ document.getElementById('mySubmit').removeAttribute("disabled"); x.removeAttribute("invalid"); y.removeAttribute("invalid"); x.setAttribute("valid", "valid"); y.setAttribute("valid", "valid"); } } </script> </section> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><strong>title One</strong></h3> </div> <div class="panel-body"> <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis velit dapibus justo blandit malesuada. Donec vel elementum purus. Nam nec viverra sapien. Quisque est ante, bibendum quis gravida id, viverra vitae massa. Duis auctor nisl a facilisis eleifend. Curabitur auctor lectus porta diam tempus, id scelerisque est euismod. Aenean egestas quam eu tempus aliquet. Donec rhoncus massa eget tempus cursus. Proin ut efficitur quam. Cras commodo libero in sapien porta, a hendrerit est sagittis.</p> </section> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><strong>title Two</strong></h3> </div> <div class="panel-body"> <section> <p>Donec posuere volutpat mauris at scelerisque. Morbi cursus pellentesque urna nec fringilla. Curabitur rutrum viverra justo in dapibus. Sed quis diam at sem fringilla accumsan id et metus. Pellentesque lobortis nulla quis porta mattis. Nulla tempor mollis quam, vitae vehicula turpis. Nullam pellentesque ipsum sed dignissim lobortis. Curabitur interdum nec urna vel tincidunt. Aliquam efficitur accumsan tortor, et tincidunt arcu egestas sed. Duis ut purus posuere mauris varius tempor vitae eget dui. Nam commodo ligula sollicitudin odio porta mollis.</p> <p>Nunc urna urna, pretium sed eros at, cursus elementum diam. Suspendisse potenti. In ultrices, augue sit amet rutrum porttitor, eros ipsum tincidunt augue, vitae viverra risus elit eget massa. Praesent tincidunt lobortis quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam tempor tincidunt nisi, non vehicula turpis maximus ac. Aliquam at leo pharetra diam tincidunt volutpat ac sit amet augue. Mauris cursus vestibulum suscipit. Mauris lacinia blandit massa nec pulvinar. Ut pretium elit posuere ipsum cursus, eu iaculis metus tincidunt.</p> </section> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><strong>title Three</strong></h3> </div> <div class="panel-body"> <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis velit dapibus justo blandit malesuada. Donec vel elementum purus. Nam nec viverra sapien. Quisque est ante, bibendum quis gravida id, viverra vitae massa. Duis auctor nisl a facilisis eleifend. Curabitur auctor lectus porta diam tempus, id scelerisque est euismod. Aenean egestas quam eu tempus aliquet. Donec rhoncus massa eget tempus cursus. Proin ut efficitur quam. Cras commodo libero in sapien porta, a hendrerit est sagittis.</p> </section> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><strong>title Four</strong></h3> </div> <div class="panel-body"> <section> <p>Donec posuere volutpat mauris at scelerisque. Morbi cursus pellentesque urna nec fringilla. Curabitur rutrum viverra justo in dapibus. Sed quis diam at sem fringilla accumsan id et metus. Pellentesque lobortis nulla quis porta mattis. Nulla tempor mollis quam, vitae vehicula turpis. Nullam pellentesque ipsum sed dignissim lobortis. Curabitur interdum nec urna vel tincidunt. Aliquam efficitur accumsan tortor, et tincidunt arcu egestas sed. Duis ut purus posuere mauris varius tempor vitae eget dui. Nam commodo ligula sollicitudin odio porta mollis.</p> <p>Nunc urna urna, pretium sed eros at, cursus elementum diam. Suspendisse potenti. In ultrices, augue sit amet rutrum porttitor, eros ipsum tincidunt augue, vitae viverra risus elit eget massa. Praesent tincidunt lobortis quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam tempor tincidunt nisi, non vehicula turpis maximus ac. Aliquam at leo pharetra diam tincidunt volutpat ac sit amet augue. Mauris cursus vestibulum suscipit. Mauris lacinia blandit massa nec pulvinar. Ut pretium elit posuere ipsum cursus, eu iaculis metus tincidunt.</p> </section> </div> </div> </div> <div class="hidden-xs hidden-sm col-md-4"> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title"><strong>Sidebar</strong></h3> </div> <div class="panel-body"> <section> <p>Donec posuere volutpat mauris at scelerisque. Morbi cursus pellentesque urna nec fringilla. Curabitur rutrum viverra justo in dapibus. Sed quis diam at sem fringilla accumsan id et metus. Pellentesque lobortis nulla quis porta mattis. Nulla tempor mollis quam, vitae vehicula turpis. Nullam pellentesque ipsum sed dignissim lobortis. Curabitur interdum nec urna vel tincidunt. Aliquam efficitur accumsan tortor, et tincidunt arcu egestas sed. Duis ut purus posuere mauris varius tempor vitae eget dui. Nam commodo ligula sollicitudin odio porta mollis.</p> <p>Nunc urna urna, pretium sed eros at, cursus elementum diam. Suspendisse potenti. In ultrices, augue sit amet rutrum porttitor, eros ipsum tincidunt augue, vitae viverra risus elit eget massa. Praesent tincidunt lobortis quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam tempor tincidunt nisi, non vehicula turpis maximus ac. Aliquam at leo pharetra diam tincidunt volutpat ac sit amet augue. Mauris cursus vestibulum suscipit. Mauris lacinia blandit massa nec pulvinar. Ut pretium elit posuere ipsum cursus, eu iaculis metus tincidunt.</p> </section> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-4"> <h4 class="text-inverse">List One</h4> <ul class="list-group"> <li class="list-group-item list-group-item-inverse"> <span class="badge">14</span> Cras justo odio </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">1</span> Dapibus ac facilisis in </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">0</span> Morbi leo risus </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">5</span> Vestibulum at eros </li> </ul> </div> <div class="col-xs-12 col-md-4"> <h4 class="text-inverse">List Two</h4> <ul class="list-group"> <li class="list-group-item list-group-item-inverse"> <span class="badge">14</span> Cras justo odio </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">1</span> Dapibus ac facilisis in </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">0</span> Morbi leo risus </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">5</span> Vestibulum at eros </li> </ul> </div> <div class="col-xs-12 col-md-4"> <h4 class="text-inverse">List Three</h4> <ul class="list-group"> <li class="list-group-item list-group-item-inverse"> <span class="badge">14</span> Cras justo odio </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">1</span> Dapibus ac facilisis in </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">0</span> Morbi leo risus </li> <li class="list-group-item list-group-item-inverse"> <span class="badge">5</span> Vestibulum at eros </li> </ul> </div> </div> </div> </footer> <!-- jQuery Easing API --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> <!-- Custom Bootstrap Sidebar Scripts --> <!-- Bugfix for Tooltips --> <script> $(document).ready(function(){ $("[rel='tooltip']").tooltip(); }); </script> <!-- Validator Code Starts Here --> <script src="https://cdnjs.cloudflare.com/ajax/libs/validator/10.3.0/validator.min.js"></script>
/*! * Soldier-up Designs - Soldier-up Designs New Homepage (https://soldierupdesigns.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ /* Global Styles */ @charset "utf-8"; *, *: before, *:after { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } body { width: 100%; height: 100%; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x: hidden; /* Margin bottom by footer height */ } html { width: 100%; height: 100%; position: relative; } a:hover{ text-decoration:none; } p{ font-size: 18px; } .navbar{ border-radius: 0px !important; margin-bottom: 0px !important; } .navbar-inverse{ border:none; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border:none; } #to-top { position: fixed; right: .2%; bottom: .2%; z-index: 799; } .btn-dark { border-radius: 0; color: #fff; background-color: rgba(0, 0, 0, 0.4); } .btn-dark:hover, .btn-dark:focus, .btn-dark:active { color: #fff; background-color: rgba(0, 0, 0, 0.7); } .btn-light { border-radius: 0; color: #333; background-color: rgb(255, 255, 255); } .btn-light:hover, .btn-light:focus, .btn-light:active { color: #333; background-color: rgba(255, 255, 255, 0.8); } .btn { border-radius: 0px; overflow: hidden; border:none; } .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: #fff; background-color: #449d44; border-color: #398439; box-shadow: inset 0 0 0 2px #398439; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #fff; background-color: #c9302c; border-color: #ac2925; box-shadow: inset 0 0 0 2px #ac2925; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #286090; border-color: #204d74; box-shadow: inset 0 0 0 2px #204d74; } .btn-default { color: #333; background-color: #efefef; border-color: #ccc; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; box-shadow: inset 0 0 0 5px #adadad; } .btn-inverse { background-color: #222; border-color: #080808; color: #9d9d9d; } .btn-inverse:hover, .btn-inverse:focus, .btn-inverse.focus, .btn-inverse:active, .btn-inverse.active, .open > .dropdown-toggle.btn-inverse { color: #fff; background-color: #080808; border-color: #333; box-shadow: inset 0 0 0 2px #333; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #fff; background-color: #c9302c; border-color: #ac2925; box-shadow: inset 0 0 0 2px #ac2925; } .btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open>.dropdown-toggle.btn-danger { color: #c9302c; background-color: #fff; box-shadow: inset 0 0 0 2px #c9302c; border-color: #ac2925; } .panel { border-radius: 0; margin-top: 0; } .btn-dark{ border-radius: 0; color: #fff; background-color: rgba(0,0,0,0.4); } .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active{ color: #fff; background-color: rgba(0,0,0,0.7); } ol.linenums{ counter-reset:linenumber; } ol.linenums li{ list-style-type:none; counter-increment:linenumber; } ol.linenums li:before{ content: counter(linenumber); float:left; margin-left:-4em; text-align:right; width:3em; } .mt { margin-top: 2%; } .masthead{ display: table; position: relative; min-width: 100%; min-height: 100%; width: 100%; height: 100%; /*background: transparent url("../img/4.gif") no-repeat fixed 0px 0px / cover*/ z-index: 800; background-color:#444; overflow: hidden; } .text-white{ color:#fff; } .text-vertical-center { display: table-cell; text-align: center; vertical-align: middle; } .text-vertical-center h1 { margin: 0; padding: 0; font-size: 4.5em; font-weight: 700; } section { padding-bottom: 1%; } .bg-inverse { color: #FFF; background-color: #333; } .centered { text-align: center; } .mt { margin-top: 2%; } .text-vertical-center { display: table-cell; text-align: center; vertical-align: middle; } .text-vertical-center h1 { margin: 0; padding: 0; font-size: 4.5em; font-weight: 700; } hr.small { max-width: 100px; } small{ color:#eee!important; } .page-header{ text-align: center; } .header-title { color: #fff; } .title-thin { font-weight: 300; } .service-item { margin-bottom: 30px; } .form-control, .form-control:required { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .form-control:invalid, .form-control:required:invalid{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .form-control:invalid:focus, .form-control:required:invalid:focus{ border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; } .form-control:valid, .form-control:required:valid{ border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .form-control:valid:focus, .form-control:required:valid:focus{ border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; } .nocode{ font-weight:700; color:#c7254e; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } pre, .nocode{ font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } .prettyprint code > .atv, .prettyprint code > .atn, .prettyprint code > .pun { background:#c7254e!important; color:#fff!important; } blockquote{ font-size: 80% !important; page-break-inside: avoid; border: 3px solid #fff; width: 80%; -webkit-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888; -mox-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888; -ms-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888; box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888; padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: none; } .updated{ display:block; position:relative; width:100%; margin:0; padding:.5%; text-align:center; background:#ededed; color:#222222; } ins{ background:#c9302c; border-color:#ac2925; } .addthis_recommended_vertical{ background:#c9302c; border-color:#ac2925; } .text-inverse{ color: #f1f1f1; } .section-header{ padding: 2%; margin-top:0px; margin-bottom:1%; background-color: #ededed; background:transparent url("../img/1.jpg") no-repeat fixed 0px 0px / cover; color:#fff; font-weight: 800; } .footer { position: static; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ min-height: 60px; background-color: rgb(34, 34, 34); vertical-align: middle; } .footer .container{ min-height:100%; margin:auto; padding: 2%; } .list-group-item-inverse { color: #ededed; background-color: #777; } a.list-group-item-inverse, button.list-group-item-inverse { color: #f00; } a.list-group-item-inverse .list-group-item-heading, button.list-group-item-inverse .list-group-item-heading { color: inherit; } a.list-group-item-inverse:hover, button.list-group-item-inverse:hover, a.list-group-item-inverse:focus, button.list-group-item-inverse:focus { color: #ededed; background-color: rgb(10, 10, 10); } a.list-group-item-inverse.active, button.list-group-item-inverse.active, a.list-group-item-inverse.active:hover, button.list-group-item-inverse.active:hover, a.list-group-item-inverse.active:focus, button.list-group-item-inverse.active:focus { color: #ededed; background-color: rgb(10, 10, 10); border-color: #333; } .bold{ font-weight: 800; }
$(document).ready(function() { $('#to-top').bind('click', function() { $('body,html').animate({ scrollTop: 0 }, 1500); }); }); $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 420 }, 500, 'easeOutBounce'); return false; } } }); });

Related: See More


Questions / Comments: