jQuery的scrollTop麻烦

我正在写一个测验网页ap的开头标题，然后是10个问题。开头的div和每个问题的div都是兄弟，所以我通过将current.nextSibling和current.previousSibling传递给我正在使用的任何函数来遍历页面。jQuery的scrollTop麻烦

现在我试图通过jQuery的'animate'和'scrollTop'方法创建一个平滑的滚动，但它不工作。有没有人有这个想法？这里附带的代码，链接捣鼓这里：https://jsfiddle.net/fjydnc9m/1/

var main = function() { 
    var root = $('html, body'); 
    var current = document.getElementById("opening"); 


    $('.upButton').click(function() { 
     $('html, body').animate({ scrollTop:$(current.previousSibling).offset().top}, 2000); 
     current = current.previousSibling; 
    }); 


    $('.downButton').click(function() { 
     $('html, body').animate({ scrollTop: $(current.nextSibling).offset().top}, 2000); 
     current = current.nextSibling; 
    }); 



} 

$(document).ready(main);

来源

2016-03-18 David Tamrazov

当我说它不工作我的意思是什么都没有发生，当我点击我的向下按钮，类“.downButton”，并与其他按钮分类相同“.upButton” –

请把真实的代码，而不是一个图像。这将确保为每个人提供更好的可读性。 –

甚至更好，请提供一个jsfiddle！ – Connum

你一直在试图常规HTML DOM元素使用jQuery .offset()。看到小提琴的这个更新版本： https://jsfiddle.net/fjydnc9m/12/

我所做的是通过jQuery得到的分组和一个兄弟和使用上.offset()。

请注意，您还必须考虑current是第一个还是最后一个包装的情况，否则会发生一些奇怪的滚动。您可以通过在滚动前检查prevSibling或nextSibling的长度是否大于0来做到这一点。

来源

2016-03-18 18:38:06 Connum

Oh right，works像一个魅力。所以你能真正快速解释我做错了什么/你在概念上是否正确地做了这些？更具体地说，我可以使用jQuery的限制是什么？从我可以看到你使用jQuery选择器，将其分配给一个变量，并在jQuery函数中使用该变量。这是常规DOM元素上使用jQuery的标准方式吗？ –

你不能在常规DOM元素上使用jQuery函数，你必须先用'$（element）'包装它们。将其保存到变量并重新使用，这只是提高性能的一种方法。你用jQuery所做的每件事都会增加一些开销 - 我们正在谈论毫秒级的基本操作，但它会加起来。因此，将不止一次需要的任何内容保存到变量中总是一个好主意。 – Connum

完美，很高兴知道。感谢帮助的人 –

如果您记录current变量，您会发现有一个#text兄弟分配给current变量。

看看这个小提琴：

https://jsfiddle.net/fjydnc9m/13/

你可以看到，我分配current变量两次PRIOR在scrollTop功能使用它：

var main = function() { 
var root = $('html, body'); 
var current = document.getElementById("opening"); 


$('.upButton').click(function() { 
    current = current.previousSibling; 
    current = current.previousSibling; 
    $('html, body').animate({ 
    scrollTop: $(current).offset().top 
    }, 2000); 
    console.log(current); 
}); 


$('.downButton').click(function() { 
    current = current.nextSibling; 
    current = current.nextSibling; 
    $('html, body').animate({ 
    scrollTop: $(current).offset().top 
    }, 2000); 
    console.log(current); 
    }); 
} 

$(document).ready(main);

注意，我m记录当前变量。删除其中一个current作业，并查看日志显示的内容（您将看到发生了什么）。

来源

2016-03-18 18:45:05

jQuery的scrollTop麻烦

回答

相关问题