Note that there are some explanatory texts on larger screens.

plurals
  1. POSmooth page scrolling implementation?
    primarykey
    data
    text
    <p>I am trying to implement this nice effect called smooth page scrolling with the easing effect. I followed the instructions from this tutorial: <a href="http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/" rel="nofollow">http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/</a></p> <p>What I wanted to do is just to be able to click to one of the links from my navbar which will make my page vertically scroll (nicely) to the exact location but it's not working.</p> <p>Hope you guys can help! Thanks in advance!!!</p> <p><a href="http://jsfiddle.net/uNKmz/7/" rel="nofollow">http://jsfiddle.net/uNKmz/7/</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Smooth Page Scrolling&lt;/title&gt; &lt;script type='text/javascript' src='smoothpagescrolling.js'&gt;&lt;/script&gt; &lt;link type="text/css" rel="stylesheet" href="stylesheet.css"/&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;a href="#" id="logo"&gt;Logo&lt;/a&gt; &lt;ul id="nav" class="nav"&gt; &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#gallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/header&gt; &lt;section id="hero1" class="hero"&gt; &lt;div class="inner"&gt; &lt;div class="copy"&gt; &lt;h1&gt;Home&lt;/h1&gt; &lt;p&gt;Some text here!&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;section class="content"&gt; &lt;div class="inner"&gt; &lt;div class="copy"&gt; &lt;h1&gt;About&lt;/h1&gt; &lt;p&gt;Some text here... &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;section id="hero2" class="hero"&gt; &lt;div class="inner"&gt; &lt;div class="copy"&gt; &lt;h1&gt;Services&lt;/h1&gt; &lt;p&gt;Some text here... &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;section class="content"&gt; &lt;div class="inner"&gt; &lt;div class="copy"&gt; &lt;h1&gt;Gallery&lt;/h1&gt; &lt;p&gt;Some text here... &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;section class="newsection"&gt; &lt;h1&gt;Contact&lt;/h1&gt; &lt;p&gt;E-mail: webmaster@yahoo.com&lt;/p&gt; &lt;/section&gt; &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'&gt; &lt;link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload