我有一些奇怪的问题。我正在使用scrollTo()
插件来滚动页面。我有垂直滚动的上下箭头,水平滚动的左右箭头。问题是,当我点击右箭头时,它向右滚动,然后如果我点击向下箭头,它首先进入左侧部分,然后向下然后再向右移动。但它应该只向下滚动。正如您在我的代码中看到的那样,我重新启动call()
函数,因此我相信scrollTo()
会记住之前的位置,然后遵循之前的路径。
所以我的问题是,当我再次调用该函数时,如何重置scrollTo()
数据。
HTML
<section class="main">
<section class="section0">
<img src="1-1.jpg">
</section>
<section class="section0">
<img src="1-2.jpg">
</section>
<section class="section0">
<img src="1-3.jpg">
</section>
</section>
<section class="main">
<section class="section1">
<img src="2-1.jpg">
</section>
<section class="section1">
<img src="2-2.jpg">
</section>
<section class="section1">
<img src="2-3.jpg">
</section>
</section>
Jquery的
$(document).ready(function(){
call(0);
});
function scrollToPosition(element) {
if (element !== undefined) {
$("html").scrollTo(element, 800, {
margin: true
});
}
}
var counter = 0;
var call = function(counter) {
var sections = $('.section'+counter);
var position = 0;
var next = $('#up');
var prev = $('#down').hide();
next.click(function(evt) {
prev.show();
scrollToPosition(sections[position += 1]);
if (position === sections.length - 1) {
next.hide();
}
});
prev.click(function(evt) {
next.show();
scrollToPosition(sections[position -= 1]);
if (position === 0) {
prev.hide();
}
});
}
$(function() {
var sections = $('.main');
var position = 0;
var next = $('#right');
var prev = $('#left').hide();
next.click(function(evt) {
counter++;
call(counter);
prev.show();
scrollToPosition(sections[position += 1]);
if (position === sections.length - 1) {
next.hide();
}
});
prev.click(function(evt) {
counter--;
call(counter);
next.show();
scrollToPosition(sections[position -= 1]);
if (position === 0) {
prev.hide();
}
});
});