scrollTo不滚动窗口

Question

我不确定为什么这个不起作用。

HTML

    <a href="#" id="scrollTop" class="margin-top-40 btn btn-danger btn-lg top btn-not-100">Back to top</a>

jQuery

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $(window).animate({scrollTop: 0}, 'slow');
    });

尝试了以下方法，但仍然无效。

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $("body, html").animate({scrollTop: 0}, 'slow');
    });

Css

    html, body {height:100%;}

使用jquery-1.10.2.js，控制台没有任何错误。 更新： 下面的评论让我了解到问题出在使用jQuery scrollTop和将html、body设置为overflow... 因此，在stackoverflow上创建了一个新问题。

- rob.m

---

你确定 JavaScript 是在 HTML 标记加载之后被加载的吗？ - Felipe Miosso

@dontvotemedown - 这是有效的（也许不是CSS）。应该可以工作。我经常使用$('html, body').animate({scrollTop: $('#elem').offset().top + 'px'}, 500); - Kai Qing

我把你的代码放在了 jSfiddle 上，它可以正常运行... http://jsfiddle.net/Asy9C/2/ - jtheman

也许你的CSS中有 body { height: 100%; }。 - Daiwei

你把代码用 $(function() { ... }) 作为外层包装了吗？ - Oleg

Answer 1

我遇到了问题，感谢评论提醒我注意到我设置了body: overflow-x:hidden，这意味着当我们在body、html上使用overflow时，scrollTop不起作用。

- rob.m

Answer 2

首先，你的第一个代码片段无法工作，因为window没有scrollTop 属性，而body有（这就解释了为什么你的第二个代码片段应该可以正常工作 - 你可以执行console.log($(window))来检查它的属性）。

然而，你可以执行$(window).animate(..)，而且在浏览器控制台中不会看到任何错误，因为该对象支持它。问题在于尝试指定scrollTop 参数给受影响的元素的动画时，由于不支持该参数，它将不能按预期工作（只需注释掉第二个代码片段中的e.preventDefault()行并查看发生了什么 - 在测试时它停止了脚本执行，我真的不知道你为什么要使用那行）。

顺便说一下，我也不知道为什么你说第二个代码片段不起作用（可能取决于你使用的浏览器，至少它在Chrome上运行）。因此，据我记得，当在jQuery选择器中仅使用body或html标签进行scrollTop时会出现一些问题，但您可以尝试使用$('body, html, document')以获得更好的兼容性，然后附加animate函数。 我建议你研究一下如何在各种浏览器中使用scrollTop。

另一个建议（如果第二个代码片段对您来说仍然无法正常工作）是检查您的 DOM 是否已加载，也许您可以尝试在 onDomReady 时使用您的代码，这意味着将其放置在 $（function（）{..}）; 或 $（document）.ready（..）中。

实时演示: http://jsfiddle.net/oscarj24/n7Buw/2/

- Oscar Jara

---

等一下，我的身体高度是100％，这就是导致它无法滚动的原因！ - rob.m

然而，我们在body 100%方面存在问题，这完全使得代码无用，因为无论性能问题如何，它都无法滚动。 - rob.m

性能问题就是你所说的（虽然我还没有看到，但现在不是问题），当你说它“工作奇怪”时。这有什么意义？该页面使用粘性页脚的100％高度，但它有一个滚动条，我想使用jQuery进行scrollTop。 - rob.m

这不是“性能”，而是“行为”，我不是CSS大师，但如果你使用了scrollTop: 0，那么它应该可以工作。另外，你的问题只是说你正在尝试“某些东西”，它没有起作用，我的答案是让你更好地理解javascript/jquery代码，这给了你正确的继续方式。如果你想要完成某些事情或仍然有问题，请进行一些研究，并不要忘记在你的问题中更具体地包括CSS标签。 - Oscar Jara

我对我的问题已经很清楚了，但还是感谢你的努力。 - rob.m

Answer 3

试试这个：

html, body {}

your_element {
  height: calc(100vh);
}

- Ivan Makarevych

---

calc(100vh)？这里不需要使用calc，只需使用height:100vh。 - Sfili_81

@Sfili_81 感谢您的澄清。更详细地说，在我的情况下：如果 html { height: 100%; } 或者 html { height: 100vh; }，那么 $(your_element).offset().top 将返回 0。这就是为什么 scrollTop 不起作用的原因。我的答案对我很有帮助。 - Ivan Makarevych

Answer 4

这行代码在我的网站上运行良好：

$("body, html").animate({scrollTop: 0}, 'slow');

所以这一定是调用代码。也许你有重复的id。在控制台中输入以下内容：

alert( $('*#scrollTop').size() );

或者您可以使用多个选择器：

function myScrollTop( e )
{
    e.preventDefault();
    $("body, html").animate({scrollTop: 0}, 'slow');
}

// Map to future elements
$('body').on( 'click', '#scrollTop', myScrollTop );

// Get all elements with id if there are multiple
$('*#scrollTop').click( myScrollTop );
 

- redolent

---

如果我执行 alert( $('*#scrollTop').size() )，它会返回 0。 - rob.m

那么你的“返回顶部”链接就不能在页面上了吗？alert($('#scrollTop').size())（不带星号）呢？ - redolent

等一下，我的身体高度是100％，这就是导致它无法滚动的原因！ - rob.m

好的，您还需要检查HTML标记。事件甚至没有附加到链接上。 - redolent