j查询滚动顶部麻烦

jQuery scrollTop troubles

本文关键字：麻烦 顶部 滚动 查询      更新时间：2023-09-26

我正在编写一个带有开头标题的测验网络应用程序，然后是后面的 10 个问题。开头的div 和每个问题的div 都是兄弟姐妹，所以我通过将 current.nextSibling 和 current.previousSibling 传递给我正在使用的任何函数来遍历页面。

现在我正在尝试通过它的"animate"和"scrollTop"方法使用 jQuery 创建一个平滑的滚动，但它不起作用。有人对此有任何想法吗？代码附在这里，链接到小提琴在这里：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);

你一直在尝试在常规的HTML DOM元素上使用jQuery .offset()。请参阅小提琴的更新版本：https://jsfiddle.net/fjydnc9m/12/

我所做的是通过jQuery获取上一个和下一个兄弟姐妹，并在此上使用.offset()。

请注意，您还必须考虑current是第一个或最后一个包装器的情况，否则会发生一些奇怪的滚动。您可以通过在滚动之前检查prevSibling或nextSibling的长度是否> 0 来执行此操作。

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

看看这个小提琴：

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

您可以看到我在scrollTop函数中使用current变量之前为它分配了两次：

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);

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

相关文章：