jQuery localScroll
I am trying to use jQuery.localScroll, and the onBefore and onAfter events are being triggered but it is not scrolling. Below is the html followed by the javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_head">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/Site.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="../scripts/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="../scripts/Site.js" type="text/javascript"></script>
</head>
<body id='blue-phoenix'>
<div id="wrapper">
<div id="topNavigation">
<ul>
<li><a href="#home" title="Home">Home</a></li>
<li><a href="#who-we-are" title="Who We Are">Who We Are</a></li>
<li><a href="#what-we-do" title="What We Do">What We Do</a></li>
<li><a href="#who-for" title="Who For">Who For</a></li>
<li><a href="#blue-lounge" title="Blue Lounge">Blue Lounge</a></li>
<li><a href="#bits-n-bobs" title="Bits n Bobs">Bits n Bobs开发者_StackOverflow</a></li>
<li><a href="#connect" title="Connect">Connect</a></li>
</ul>
</div>
<div id="home">
<div class="inner">
<img alt="Blue Phoenix" src="/media/50/logo_col.png" />
</div>
</div>
<div id="body">
<form method="post" action="/default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MWRk5+wj/nfDCFMUtHbyaacEc3PDsFKgOQnVhOrvbLH95Q8=" />
</div>
<div id="who-we-are" class="section" style="background-image:url(bkgrd02.jpg)">
<div class="inner">
<div class="content">
<div class="inner-content">
<h3>Who We Are</h3>
<p>Duis vitae urna dui. Nullam vel lobortis erat. Cras suscipit lorem vel nulla sodales vel facilisis diam.</p>
<a class="action" href="/who-we-are.aspx">Read more...</a>
</div>
</div>
</div>
</div>
<div id="what-we-do" class="section" style="background-image:url(bkgrd02.jpg)">
<div class="inner">
<div class="content">
<div class="inner-content">
<h3>Who We Are</h3>
<p>Duis vitae urna dui. Nullam vel lobortis erat. Cras suscipit lorem vel nulla sodales vel facilisis diam.</p>
<a class="action" href="/who-we-are.aspx">Read more...</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Below is the javascript
$.noConflict();
jQuery(document).ready(function ($) {
/*** DROPDOWN MENU ***/
$("#topNavigation ul li").hover(function () {
$("ul:hidden", this).slideDown("fast");
}, function () {
$("ul:visible", this).slideUp("slow");
});
$("#topNavigation ul ul").hide();
/*** LOCALSCROLL ***/
$.localScroll({
onBefore: function (e, anchor, $target) {
// The 'this' is the settings object, can be modified
},
onAfter: function (anchor, settings) {
// The 'this' contains the scrolled element (#content)
}
});
});
Any ideas why the scroll effect is not happening?
The following CSS seemed to be causing the issue
html, body { height: 100%; overflow: auto; }
Removing it seemed to solve the problem.
加载中,请稍侯......
精彩评论