Smooth page scrolling implementation?

Question

I am trying to implement this nice effect called smooth page scrolling with the easing effect. I followed the instructions from this tutorial: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

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.

Hope you guys can help! Thanks in advance!!!

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>

I suggest this approach: http://css-tricks.com/snippets/jquery/smooth-scrolling/ — wandarkaf, Jun 21 '13 at 11:07
It's not my script. I am just using it to learn. So I tried to implement smooth page scrolling here. I am very new to web development so I am trying to figure out how different concepts work. — C. Felipe, Jun 21 '13 at 11:12
You have a lot of trouble in your JS fiddle. For example, smoothpagescrolling.js is not included in the fiddle, JQuery neither. The section id don't correspond to the links, .... Start to fix your fiddle please — sdespont, Jun 21 '13 at 11:12
Have a look at this : http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page — Nick R, Jun 21 '13 at 11:14
@sdespont: Thanks for pointing me in the right directon. I deleted the links to jquery from mh html because it was not working so I thought there is smtng wrong with it. — C. Felipe, Jun 21 '13 at 11:15

score 1 · Answer 1 · answered Jun 21 '13 at 11:18

It would seem like the main problems with the jsfiddle is that you're not including jQuery UI and that your sections are missing their IDs. Other than that, there's nothing wrong with your script.

Take a look at: 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>

Thank you! I will go through your script and pay attention to the changes you have made. — C. Felipe, Jun 21 '13 at 11:24
How can I include jquery UI? And where in my html I should add the link? I added it before but w/o success.Maybe my link was wrong? — C. Felipe, Jun 21 '13 at 11:28
You'd include it like you include jquery. On jsFiddle you need to check the box, but on your own site you'll need to link to it. Either locally or use google for example, https://developers.google.com/speed/libraries/devguide#jquery-ui — Jesper Bränn, Jun 21 '13 at 11:57
I figured it out already in the meantime. I actually included the correct link from the first time but in the wrong html document because I am working with too many documents opened in the same time. My bed. Thank you anyway. Appreciate your help very much! — C. Felipe, Jun 21 '13 at 12:00

score 1 · Accepted Answer · answered Jun 21 '13 at 11:19

1

Check this, there was a problem with the way you were mapping ids in your anchor tag and sections

answered Jun 21 '13 at 11:19

painotpi

6,894
1
37
70

Thank you. So, only the ids were the problem? If there was more to it I would like to know. My goal is to understand how the code works not only to copy it. Appreciate your help! – C. Felipe Jun 21 '13 at 11:21
1

Yes, `ids` were the only problem :) I'd advise you to write code, reading and seeing won't help you understand. Even if you're getting code from the internet, delete and write each line of that code over and over again :) – painotpi Jun 21 '13 at 15:56
Alright. That sounds like a smart way to improve my skills. I always want to improve my learning process. Thanks for a good advice! – C. Felipe Jun 22 '13 at 10:57

score 0 · Answer 3 · answered Jun 21 '13 at 11:18

0

Use

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

answered Jun 21 '13 at 11:18

Rachit Doshi

183
1
6

Smooth page scrolling implementation?

3 Answers3