1

我正在尝试使用缓动效果来实现这种称为平滑页面滚动的漂亮效果。我按照本教程中的说明进行操作：http ://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/

我想做的只是能够单击导航栏中的链接之一，这将使我的页面垂直滚动（很好地）到确切的位置，但它不起作用。

希望大家能帮忙！提前致谢！！！

http://jsfiddle.net/uNKmz/7/

<!DOCTYPE html>
<html>
    <head>
        <title>Smooth Page Scrolling</title>
        <script type='text/javascript' src='smoothpagescrolling.js'></script>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
    <header>
        <a href="#" id="logo">Logo</a>
                    <ul id="nav" class="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
    </header>

<section id="hero1" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Home</h1>
    <p>Some text here!</p>
    </div>
  </div>
</section>

<section class="content">
  <div class="inner">
    <div class="copy">
    <h1>About</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="hero2" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Services</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section class="content">
  <div class="inner">
    <div class="copy">
    <h1>Gallery</h1>
      <p>Some text here... </p>
    </div>
  </div>
</section>

<section class="newsection">
    <h1>Contact</h1>
    <p>E-mail: webmaster@yahoo.com</p>
</section>

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    </body>
</html>
4

3 回答 3

1

jsfiddle 的主要问题似乎是您没有包含 jQuery UI，并且您的部分缺少它们的 ID。除此之外，您的脚本没有任何问题。

看看：http: //jsfiddle.net/8UYmX/2/

<!DOCTYPE html>
<html>
    <head>
        <title>Smooth Page Scrolling</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
    <header>
        <a href="#" id="logo">Logo</a>
                    <ul id="nav" class="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
    </header>

<section id="hero1" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Home</h1>
    <p>Some text here!</p>
    </div>
  </div>
</section>

<section id="about" class="content">
  <div class="inner">
    <div class="copy">
    <h1>About</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="services" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Services</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="gallery" class="content">
  <div class="inner">
    <div class="copy">
    <h1>Gallery</h1>
      <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="contact" class="newsection">
    <h1>Contact</h1>
    <p>E-mail: webmaster@yahoo.com</p>
</section>

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    </body>
</html>
于 2013-06-21T11:18:39.457 回答
1

检查一下ids，您在锚标记和部分中的映射方式有问题

于 2013-06-21T11:19:01.583 回答
0

利用

window.scrollTop($('div.element').offset().top);
于 2013-06-21T11:18:52.013 回答