CODEWITHSUNDEEP
jqueryhtmlcss
C. Felipe
C. Felipe

Reputation: 469

Smooth page scrolling implementation?

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: [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>

Upvotes: 1

Views: 2909

Answers (3)

painotpi
painotpi

Reputation: 6996

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

Upvotes: 1

Rachit Doshi
Rachit Doshi

Reputation: 183

Use

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

Upvotes: 0

Jesper Br&#228;nn
Jesper Br&#228;nn

Reputation: 23

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: [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>

Upvotes: 1

Related Questions