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

Question

我有一种感觉，我试图在这个问题中找到解决方案 - Can't trigger a jquery function with scroll on a particular div - 可能是这里与滚动相关的问题。

短版：无法使用此功能或类似功能

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

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

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

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

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

这就是我的 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 缓存到变量中，并在 click 函数中使用 .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

Answer 2

据我所知，你有两种可能。

1-使用 jQuery 滚动整个页面，直到到达 #Content div 位置的顶部。

2-您的 #Content 位于带有滚动条的 div 中，scrollTop(0) 将为此工作（例如：http://jsfiddle.net/zkp07abu/）。