平滑的页面滚动实施？

我想实现这个很好的效果，称为平滑页面滚动与缓动效应。我遵循本教程的说明：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: [email protected]</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-21 C. Felipe

我建议的方式有问题这种方法：http://css-tricks.com/snippets/jquery/smooth-scrolling/ – wandarkaf

你的脚本???? –

这不是我的脚本。我只是用它来学习。所以我试图在这里实现平滑的页面滚动。我对网络开发很陌生，所以我想弄清楚不同的概念是如何工作的。 –

检查this，有一个与你被映射在你的锚标记ids和部分

来源

2013-06-21 11:19:01

谢谢。那么，只有ID是这个问题？如果还有更多，我想知道。我的目标是理解代码如何工作，不仅仅是为了复制它。感谢你的帮助！ –

是的，'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: [email protected]</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-21 11:18:39 Joppe

谢谢！我会仔细检查你的脚本，并注意你所做的改变。 –

如何包含jQuery UI？在我的html中，我应该添加链接？我之前添加了它，但没有成功。可能我的链接错了吗？ –

你会像包含jquery一样包含它。在jsFiddle上，您需要选中该框，但在您自己的网站上，您需要链接到它。在本地或使用谷歌例如，https://developers.google.com/speed/libraries/devguide#jquery-ui – Joppe

使用

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

来源

2013-06-21 11:18:52

平滑的页面滚动实施？

回答

相关问题