CODEWITHSUNDEEP
javascriptjqueryscrollsmooth-scrolling
simonmoonlandings
simonmoonlandings

Reputation: 157

Unable to get Jquery Smooth scrolling to work

I have been pulling my hair out trying to get functional smooth scrolling to ids on the same page. I have tried just about every solution I have found on google. I get to a point where when it seems everything should work but then even the basic non-js id linking breaks. I am currently using the smooth-scrolling plugin downloaded from the jquery website. The code as it currently stands is such. I don't know a ton about JS or Jquery so I assume I am just missing something. I inspecting the code on functional versions of the smooth scrolling but even when I do the in-page linking breaks entirely:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simon Moon Landings</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
    $(document).ready(function() {
      $('ul.mainnav a').smoothScroll();
    });

  </script>
</head>

<body>
<div class="container">

<div class="menu">
<nav>
<ul class="mainnav">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
<li><a href="#five">five</a></li>
<li><a href="#six">six</a></li>
</ul>
</nav>
<img class="logo" src="images/smlogo.gif" width="450" height="288" alt="Simon Moon Landings Logo" onmouseover="on();" onmouseout="off();"></nav>
</div>

<div class="content">

<div class="section" id="one">
<h4>One</h4>

</div>
<div class="section" id="two">
<h4>Two</h4>

</div>
<div class="section" id="three">
<h4>Three</h4>

</div>
<div class="section" id="four">
<h4>Four</h4>

</div>
<div class="section">
<a id="five"><h4>Five</h4></a>

</div>
<div class="section">
<a id="six"><h4>six</h4></a>

</div>
</div>

</div>


</body>
</html>

Upvotes: 2

Views: 2054

Answers (4)

wakqasahmed
wakqasahmed

Reputation: 2089

It worked for me while testing on jsfiddle, 

here you go

http://jsfiddle.net/mastermindw/XvV9W/1/

Upvotes: 0

simonmoonlandings
simonmoonlandings

Reputation: 157

I found the problem. It was not in the script at all, but in the CSS. I have a two column layout, the menu and anchors are in one column (.menu) and the target divs are in another column (.content) I applied poisiton:fixed to the menu and it started working.

Upvotes: 1

user428517
user428517

Reputation: 4193

It works for me. See this example: http://jsbin.com/ixefet/1/edit

All I did was change the src for the smooth scroll JavaScript to the online version (https://raw.github.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.min.js) and add some text so you can see the scrolling happen.

Sounds like you're using the wrong src for your smooth scroll script (if that's the case, your JavaScript error log should say undefined function: $.smoothScroll or something like that).

Upvotes: 0

J&#243;ni Louren&#231;o
J&#243;ni Louren&#231;o

Reputation: 117

It works fine here.

Make sure that the URL of jquery-smooth-scroll is correct.

I used this copy of jquery-smooth-scroll to test your code: https://github.com/kswedberg/jquery-smooth-scroll

Upvotes: 0

Related Questions