javascript - .scrollTop(0) 无法让 div 滚动到顶部

Question

我有一种感觉，是什么给我带来了问题，我试图在这个问题中找到解决方案 - Can't trigger a jquery function with scroll on a particular div - 可能负责此处滚动相关的问题。

简短版本:无法使这个或类似的东西工作

$("#Container3").scrollTop(0);

实际上什么都没有发生，控制台中没有错误，没有奇怪的行为，只是似乎忽略了 scrollTop(0) 请求。

长版:很抱歉，发布代码片段是不可行的，因为它是一个类似应用程序的复杂界面，但我会尽力解释这个问题:

• 根据屏幕空间加载不同界面的移动响应式网站。
• 由 3 部分组成的最小界面 - 顶部的导航、底部的搜索和中间的内容。
• 内容主要在使用期间加载，而不是在页面加载时加载。
• 在按下重新加载特定 div 内容的按钮时，出于可用性目的，我还需要将该 div 滚动到顶部。
• 虽然它似乎不会影响我的问题(删除它并不能解决问题)，但我应该透露我正在使用 hammer.js 来模拟触摸事件，因为它可能会影响解决方案。

加载是在视口(viewport)之外完成的，因此不需要动画，但只要它们能够正常工作，我就会使用它们。

这就是我的 jquery 请求的样子

$(document).on("click",".NavRowButton",function(event){
    $("#Container3").scrollTop(0);
    var $targetButtonId=$(event.target).attr("id");
    $("#Content").load("/load/login/"+$targetButtonId+".php");
    $("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
    $("#Container3").find(".WindowBorder").css("top","0");
});

#Container3 有滚动条并且是#Content 的直接父级。

这是一个我仍在构建的函数，它是我之前遇到的问题的解决方案，也是我现在用来帮助调试这个问题的方法:

document.addEventListener('scroll',function(event){
    if(event.target.className==='Container'){
        var $currentScroll=$(event.target).scrollTop();
        console.log($currentScroll);
        var $targetId=$(event.target).attr("id");
        console.log($targetId);
    }
},true);

提前致谢。

编辑: 我刚刚注意到，如果我放一个 $(event.target).scrollTop(0);在滚动距离调试功能的末尾，它实际上重置了滚动，所以看起来只要 div 是 event.target 它就可以工作，而在点击功能期间从外部我可能没有正确选择它。

Edit2: 我刚刚了解到我可以将 event.targets 缓存到变量中，并在点击函数中使用 .get() 我确定我选择了正确的元素，所以它只剩下如何scrollTop(0) 方法有效。

它们现在看起来像这样(还必须添加一个条件来限制加载事件):

全局变量:

$DivTestVar="";

点击:

$(document).on("click",".NavRowButton",function(event){
    var $targetButtonId=event.target.id;
    if($targetButtonId != $("#DisplayContentName").html()){
        $($DivTestVar).scrollTop(0);
        console.log($($DivTestVar).get());
        $("#Content").load("/load/login/"+$targetButtonId+".php");
        $("#DisplayContentName").html($targetButtonId);
        $("#Container3").find(".WindowBorder").css("top","0");
    };
});

滚动调试:

document.addEventListener('scroll',function(event){
    if(event.target.className==='Container'){
        $DivTestVar=event.target;
        var $currentScroll=$($DivTestVar).scrollTop();
        console.log($currentScroll);
        var $targetId=event.target.id;
        console.log($targetId);
    }
},true);

如果我在滚动之前单击 console.log($($DivTestVar).get());返回空，但如果在第一次滚动时它开始返回正确的 DOM 元素。 scrollTop(0) 无论如何都会被忽略。

Edit3:我只想留下一个小更新。从那以后，我放弃了我在这里尝试使用的方法，以获得类似效果但不像我试图实现的那样用户友好。因此，我个人不再关心这个问题，但如果你正在阅读这篇文章并遇到类似的问题，我已经多次遇到过这个问题，但影响较小，我现在认为它与 position:fixed; 有关。元素以及 scrollTop() 如何处理它，但我没有时间深入研究它，祝你好运，一切顺利。

Answer 1

你试过纯JS版本吗？

document.getElementById('Container').scrollTop = 0