Question

我是jQuery的新手;忍受我。一直试图通过pdoherty926使用这个简单（但很棒）的解决方案来进行下一次滚动：

jQuery Scroll to Next Div Class with Next / Previous Button

然而，在从他的jsfiddle链接复制代码后，滚动在我的页面上不起作用。我错过了什么？

我已将它全部放入HTML5页面进行播放（显然会移动样式和js以分离链接的CSS和JS文件）：

<!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>

非常欢迎任何和所有帮助/建议。

Answer 1

我在 jsfiddle 上找到了你的脚本您只需使用 Jquery 1.8.3 而不是 1.9.1 。所以使用版本 1.8.3

更改您的 jquery 库

请插入以下jquery库

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

Answer 2

html，css和js是有用的，你可能正在使用一个过时的jQuery库。见工作jsfiddle：http://jsfiddle.net/swm53ran/200/

您需要使用jQuery 1.11或更高版本。版本2+更受欢迎（但有时它不适用于IE＆lt; 9，而1.11对于IE＆lt; 9来说是稳定的）

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

Answer 3

请更改jquery库脚本而不是

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

更新如下：

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

实际上你并没有编写 HTTP：协议而没有从 googleapis获取jquery库

jQuery滚动到下一个/上一个Div

3 个答案: