平滑的页面滚动实现

我正在尝试实现这种很好的效果，称为具有缓和效果的平滑页面滚动。我遵循了本教程中的说明：http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-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>

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

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>

使用

window.scrollTop($('div.element').offset().top);

相关内容

最新更新

热门标签：