Question

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

我试过了

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

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

Answer 1

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

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

此版本经过测试，适用于所有桌面浏览器和移动设备的浏览器。

Answer 2

简单的纯JavaScript，也适用于移动

window.scrollTo(0,0);

Answer 3

你可以使用这个：

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

或者这个：

jQuery(window).scrollTop(0);

或最后：

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

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

最后两种方法应该在所有浏览器中不断运行，而第一种方法可能在某些版本的IE中不起作用。

Answer 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”值。

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

滚动到页面顶部

5 个答案: