平滑的頁面滾動實施？

我想實現這個很好的效果，稱爲平滑頁面滾動與緩動效應。我遵循本教程的說明：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

平滑的頁面滾動實施？

回答

相關問題