Unable to get Jquery Smooth scrolling to work
Question
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>
4 answers
solution1
1 ACCPTED 2013-06-13 19:23:17
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.
solution2
0 2013-06-13 19:04:26
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
solution3
0 2013-06-13 19:13:19
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).
solution4
0 2013-06-13 19:38:19
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.