Как scrollTop, когда html, тело установлено на высоту: 100%?

Следующие действия не будут работать, если я не удалю height: 100% из body и html. Тем не менее, мне нужен этот стиль, поскольку я использую его для других элементов на странице.

HTML

<a href="#" id="scrollTop">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%; min-height:100%;}

Ответ 1

У меня возникла проблема, благодаря комментариям я заметил, что у меня есть body: overflow-x:hidden, что означает, что scrollTop не работает, когда мы используем overflow на body, html

Ответ 2

У меня была та же проблема с body { height: 100%; } и scrollTop(0).

Поскольку я не смог изменить html/css по разным причинам, Обходной путь состоял в том, чтобы удалить height до scrollTop, а затем вернуться в исходное состояние.

// Change height:100% into auto
$('body').css('height', 'auto');
// Successfully scroll back to top
$('body').scrollTop(0);
// Remove javascript added styles
$('body').css('height', '');

Ответ 3

Если вы можете просто использовать min-height, он не нарушит функции прокрутки. (тестируется только в Chrome)

body, html {
    min-height: 100%;
}

Ответ 4

Это сработало для меня:

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

http://jsfiddle.net/fvuy6/41/

Ответ 5

@Andrew Tibbetts: ваш вопрос, почему настройка переполнения: скрытый запрет scrolltop.

В соответствии с моим пониманием, когда мы говорим, что переполнение скрыто, мы говорим, что мы не хотим показывать дополнительную часть, т.е. спрячем лишнюю часть

Поэтому мы не хотим прокручивать, это означает, что scrolltop всегда останется 0

поскольку scrolltop, насколько мы прокручиваем вверх.

Ответ 6

$(document).on('click', '.action', function() {
    $('html, body').css({height: 'auto'}).animate({
        scrollTop: $("#container").offset().top
    }, 500);
});