返回页面顶部

Question

如果点击按钮，有没有一种简单的方法强制浏览器滚动到页面顶部？

我已经尝试过

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

它们似乎都无法滚动到页面顶部。

- James Wilson

---

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

Answer 1

由于跨浏览器的奇怪问题，某些浏览器会响应 'html' ，而其他浏览器则会响应'body'。也许这只是我的运气不好，但使用.scrollTop(0)从未成功过。试试这个：

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

这个版本已经过测试，可以在所有桌面浏览器和移动设备上运行。

- Fresheyeball

---

这个很顺利地运行了。在FF、IE或Safari中都无法使其崩溃。还没有检查过Chrome。谢谢！ - James Wilson

顺便说一下，我也尝试了这段代码。它对我有效。但是我在想CSS Tricks是一个很棒的名字，也许他们之所以放了一段长代码是有原因的 :) 谢谢你澄清了这个问题 :)我也很喜欢Mario的答案 :) - Jashwant

CSS tricks是一个很棒的博客，我从中学到了很多东西，但有时候我还是会不同意他们的观点 ;) - Fresheyeball

你是一颗星。 - JAnton

Answer 2

简单纯粹的JavaScript代码，也适用于移动设备

window.scrollTo(0,0);

- Mario

---

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

Answer 3

你可以使用以下内容：

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

或者这个：

jQuery(window).scrollTop(0);

或最后这个：

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

因此，要调用scrollTop方法并使页面滚动，您需要传递一个参数，该参数是表示scrollTop位置的数值。否则，它将起到获取scrollTop位置的作用。

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

- VisioN

---

我无法让“body”正常工作，但只要传入0，“html”就可以工作。您知道这些是否跨浏览器，或者哪个版本可能无法使用此方法吗？ - James Wilson

@JamesWilson 请看我的答案，这是一个简单的跨浏览器解决方案。 - Fresheyeball

@JamesWilson 这取决于具体情况。你可以尝试Fresheyball的方法，但不需要动画效果，只需使用以下代码：jQuery('html, body').scrollTop(0); - VisioN

我选择了Freshey's，它似乎在所有浏览器上都能正常工作。感谢您的回答，它们确实有效。 - James Wilson

Answer 4

既然没有人提到所需的HTML，我在这里补充一下。

首先创建你的锚点元素：

<a href="#" title="回到顶部" class="ScrollTop">回到顶部</a>

请注意，class 在下面的 jQuery 中被引用。

然后添加你的 jQuery：

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

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

- Ken Prince

Answer 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的代码

- Jashwant

---

你知道这个方法是否比下面的Fresheyeball更好吗？或者它们在浏览器一致性方面做的事情差不多吗？ - James Wilson

@JamesWilson，它们基本上做的是相同的事情，除了这种方法在使用之前需要确定“'body'”或“'html'”，从而进行不必要的工作。坦白地说，这对于解决方案来说是很多余的代码。 - Fresheyeball