-3

I'm new to jQuery; bear with me. Have been trying to use this simple (but great) solution to next-previous scrolling by pdoherty926:

jQuery Scroll to Next Div Class with Next / Previous Button

However, after copying the code from his jsfiddle link the scrolling won't work on my page. What am I missing?

I've put it all into an HTML5 page to play with it (will obviously move styles and js to separate linked CSS and JS files):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>scroll test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.section').first();
$('a.display').on('click', function(e) {
e.preventDefault();
var t = $(this).text(),
that = $(this);
if (t === 'next' && $('.current').next('div.section').length > 0) {
var $next = $('.current').next('.section');
var top = $next.offset().top;   
$('.current').removeClass('current');
$('body').animate({
scrollTop: top     
}, function () {
$next.addClass('current');
});
} else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
var $prev = $('.current').prev('.section');
var top = $prev.offset().top;
$('.current').removeClass('current');
$('body').animate({
scrollTop: top     
}, function () {
$prev.addClass('current');
});
} 
});
});
</script>
<style type="text/css">
.section {background-color:gray; height:440px; margin-bottom:20px;}
.navigation {position:fixed; right:50px; top:10px;}
</style>
</head>
<body>
<div class="main">
<div class="navigation">
<a href="#" class="display">next</a><br>
<a href="#" class="display">prev</a>
</div>
<div id="one" class="section current">
One
</div>
<div id="two" class="section">
Two
</div>
<div id="three" class="section">
Three
</div>
<div id="four" class="section">
Four
</div>
</div>

Any and all help/advice very welcome.

Community
  • 1
  • 1
Andrew Hills
  • 13
  • 3

3 Answers3

0

I got your script on jsfiddle And You just need to use Jquery 1.8.3 instead of 1.9.1. so change your jquery library with the version 1.8.3

Please insert the following jquery library

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
user3078111
  • 1
  • 6
0

the html, css and js is functional, you're probably using an outdate jQuery library. see working jsfiddle: http://jsfiddle.net/swm53ran/200/

you need to use jQuery version 1.11 or higher. version 2+ is more preferrable (but sometimes it doesnt work well with IE<9, whereas 1.11 is stable for IE<9)

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
indubitablee
  • 8,136
  • 2
  • 25
  • 49
0

Please change the jquery library script instead of following

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Update as following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Actually you are not writing HTTP: protocol which is not getting the jquery library from googleapis

user3078111
  • 1
  • 6