Question

我正在尝试使用jQuery.localScroll，并且正在触发onBefore和onAfter事件，但它不会滚动。下面是html，然后是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</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>

以下是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)
    }
  });
});

为什么没有发生滚动效果的想法？

Answer 1

以下CSS似乎导致了问题

html, body { height: 100%; overflow: auto; }

删除它似乎解决了这个问题。

jQuery localScroll

1 个答案: