滚动到页面顶部答案

【问题标题】：Scroll to top of page滚动到页面顶部
【发布时间】：2012-05-24 21:23:02
【问题描述】：

如果单击按钮，是否有一种简单的方法可以强制浏览器滚动到顶部？

我试过了

jQuery('html').scrollTop();
jQuery('body').scrollTop();
jQuery(window).scrollTop();

它们似乎都没有滚动到页面顶部。

【问题讨论】：

这是因为scrollTop() 除非给定值，否则实际上不会滚动页面；如果没有值，它只会返回一个像素值，表示 滚动位置，作为相对于页面 top 的偏移量。

标签： jquery

【解决方案1】：

由于跨浏览器的奇怪，一些浏览器会响应'html'，而一些浏览器会响应'body'。也许这只是我的运气，但.scrollTop(0) 从来没有让我移动页面。试一试：

jQuery('html,body').animate({scrollTop:0},0);

此版本已针对所有桌面浏览器和移动设备进行了跨浏览器测试。

【讨论】：

这就像一个魅力。无法让它在 FF、IE 或 Safari 中破解。还没有检查铬。谢谢！
顺便说一句，我也试过这个代码。这个对我有用。但是我认为 css 技巧是一个很棒的名字，可能是他们放了一个长代码是有原因的 :) 谢谢你的澄清 :) 我也喜欢马里奥的回答 :)
CSS 技巧是一个摇摆不定的博客，我从中学到了很多东西，但有时我仍然不同意他们的观点；）
你是明星。

【解决方案2】：

简单的纯 javascript，也适用于移动设备

window.scrollTo(0,0);

【讨论】：

最简单的跨平台解决方案。谢谢

【解决方案3】：

你可以使用这个：

jQuery('body').scrollTop(0);

或者这个：

jQuery(window).scrollTop(0);

或者最后是这个：

jQuery('html').scrollTop(0);

因此，为了调用scrollTop 方法并使页面滚动，您应该传递一个带有表示scrollTop 位置的数值的参数。否则它将像您需要获取 scrollTop 位置一样工作。

最后两种方法应该在所有浏览器中始终有效，而第一种方法可能在某些版本的 IE 中无效。

【讨论】：

我无法让'body'工作，但只要我传入0，'html'就可以工作。你知道这些是跨浏览器还是这个方法在哪个版本中不起作用机会？
@JamesWilson 查看我的答案以获得简单的跨浏览器解决方案。
@JamesWilson 这真的取决于。您可以尝试 Fresheyball 的方法，但没有动画，只需：jQuery('html, body').scrollTop(0);
我选择了 Freshey，它似乎适用于所有浏览器。也感谢您的回答，它们确实有效。

【解决方案4】：

由于没有人提到所需的 HTML，我将在此处添加它。

首先创建你的锚元素：

<a href="#" title="Scroll to Top" class="ScrollTop">Scroll To Top</a>

请注意，该类被以下 jQuery 引用。

然后添加你的 jQuery：

$(document).ready(function(){
  $('.ScrollTop').click(function() {
    $('html, body').animate({scrollTop: 0}, 800);
  return false;
    });
});

要调整动画的速度，请更改“800”值。

【讨论】：

【解决方案5】：

这是跨浏览器的方式，

function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
        var el = arguments[i],
        $scrollElement = $(el);
        if ($scrollElement.scrollTop()> 0) {
            return el;
        } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
                return el;
            }
        }
    }
    return [];
}

var scrollElem = scrollableElement('html', 'body');

$(scrollElem).scrollTop(0);

来自 css-tricks 的代码

【讨论】：

你知道这个方法是否比下面的 Fresheyeball 更好吗？或者就浏览器的一致性而言，它们是否做同样的事情？
@JamesWilson 他们做的事情基本上是一样的，除了这个方法在使用它之前要经过不必要的工作来确定'body' 或'html'。坦率地说，解决方案有很多额外的代码。