jQuery scrollTop не работает в Chrome, но работает в Firefox

Question

jQuery scrollTop не работает в Chrome, но работает в Firefox

66

Я использовал функцию scrollTop в jQuery для навигации вверх, но странно "гладкая анимированная прокрутка" перестала работать в Safari и Chrome (прокручивая без гладкой анимации) после внесения некоторых изменений.

Но он все еще работает гладко в Firefox. Что может быть неправильным?

Вот функция jQuery, которую я использовал,

JQuery

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});

HTML

<a id="gotop" href="#">Go Top </a>

CSS

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}

Maju 15 июнь 2010, в 05:26

Источник

1

jsbin.com/erade/2 отлично работает на Chrome
jAndy 15 июнь 2010, в 05:32
0

@jAndy, мне было интересно, почему scrollTop , который не является допустимым свойством css, работает в вашей демоверсии? ... Вы можете поделиться какой-нибудь информацией или ссылкой на нее?
Reigel 15 июнь 2010, в 05:55
0

@ Рейгель: Я должен признать, я не могу. Я использую его почти как черный ящик, но jQuery Infacts нормализует его.
jAndy 15 июнь 2010, в 06:04
0

@jAndy - хорошо ... но я думаю, было бы нецелесообразно использовать scrollTop в свойствах анимированной CSS-карты ... Я все еще копаю ...
Reigel 15 июнь 2010, в 06:18
0

Возможно дублирование scrolltop с анимацией не работает
Mister Q 13 июль 2018, в 14:17

Показать ещё 3 комментария

Теги:

jquery

jquery-ui

jquery-selectors

15 ответов

50

Если ваш CSS html элемент имеет следующую разметку overflow, scrollTop не будет функционировать.

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

Чтобы прокрутить scrollTop, измените свою разметку, удалите overflow разметку из элемента html и добавьте элемент body.

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}

user2971963 06 нояб. 2014, в 05:03

3

Это было мое решение, спасибо
Eduardo Ortiz 11 нояб. 2014, в 14:38
4

это может быть более 4 лет, но это все еще было решением моей проблемы
Rafael Rotelok 05 март 2015, в 17:44
1

@ Leandro, это решение в Chrome 41. Не отчаивайтесь ответом, который отвечает на вопрос.
worc 17 март 2015, в 23:42
1

@Leandro Этот парень только что спас мне жизнь! это сработало для меня
liltof 31 март 2015, в 12:37
1

ВЫ СПАСЛИ МОЮ ЖИЗНЬ
delphaber 12 май 2015, в 15:02
0

Боже мой, это решило две проблемы для меня. Большое спасибо <3
Osamah Aldoaiss 01 сен. 2016, в 10:44
0

Вы просто сэкономили мне много времени, спасибо.
gwar9 26 июль 2017, в 18:29
0

То же самое здесь - спасибо!
miss.emenems 22 дек. 2017, в 10:13

Показать ещё 6 комментариев

13

Он работает в обоих браузерах, если вы используете scrollTop() с 'document':

$(document).scrollTop();

... вместо "html" или "body". Другой способ он не будет работать одновременно в обоих браузерах.

Alejandro del Río 22 март 2012, в 10:58

0

Это работает, но не при использовании animate()
lulalala 30 окт. 2012, в 05:53
0

Документ работал для меня, когда «html» и «body» не работали. Спасибо :)
ConorLuddy 20 нояб. 2014, в 15:22
0

это работает для меня, спасибо. это хорошее решение
Scooter Daraf 18 авг. 2016, в 17:09

Показать ещё 1 комментарий

5

Я использовал это с успехом в Chrome, Firefox и Safari. Не удалось проверить его в IE еще.

if($(document).scrollTop() !=0){
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}

Причиной оператора "if" является проверка того, готов ли пользователь в верхней части сайта. Если да, не делайте анимацию. Таким образом, нам не нужно так беспокоиться о разрешении экрана.

Причина, по которой я использую $(document).scrollTop вместо ie. $('html,body') - причина, по которой Chrome почему-то всегда возвращает 0.

Steven 04 май 2011, в 20:46

2

У меня была такая же проблема с прокруткой в хроме. Итак, я удалил эти строки кодов из моего файла стиля.

html{height:100%;}
body{height:100%;}

Теперь я могу играть со свитком, и он работает:

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");

RAM 15 авг. 2016, в 06:18

0

Вот это да. Это полностью исправило мою проблему! Я не мог заставить scrollTop работать вообще, но как только я удалил высоту: 100% от тела и HTML-элемента, он работал отлично. Спасибо Спасибо спасибо.
agon024 06 сен. 2016, в 20:26
0

@ agon024, я тоже счастлив;). На самом деле я нашел это решение после нескольких часов тестирования и попытался написать здесь для кого-то вроде вас.
RAM 06 сен. 2016, в 21:55

2

Прокрутите тело и проверьте, не сработало ли оно:

function getScrollableRoot() {
    var body = document.body;
    var prev = body.scrollTop;
    body.scrollTop++;
    if (body.scrollTop === prev) {
        return document.documentElement;
    } else {
        body.scrollTop--;
        return body;
    }
}


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");

Это более эффективно, чем $("html, body").animate, потому что используется только одна анимация, а не две. Таким образом, срабатывает только один обратный вызов, а не два.

NVI 10 сен. 2013, в 07:51

0

Хорошая работа! Мне очень помогли!
gogachinchaladze 17 окт. 2017, в 13:44

1

Я использую:

var $scrollEl = $.browser.mozilla ? $('html') : $('body');

потому что читать jQuery scrollTop не работает в Chrome, но работает в Firefox

Aamir Afridi 10 май 2013, в 16:54

1

может быть, вы имеете в виду top: 0

$('a#gotop').click(function() {
  $("html").animate({ top: 0 }, "slow", function() { 
                                           alert('Animation complete.'); });
  //return false;
});

из анимированные документы

.animate( свойства, [продолжительность], [ослабление], [обратный вызов])
свойства Карта свойств CSS, к которой будет перемещаться анимация.
...

или $(window).scrollTop()?

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});

Reigel 15 июнь 2010, в 05:16

0

Тем не менее анимация не работает. Нашел простое решение. Мне пришлось использовать «body, html» или «html, body» вместо просто «html».
Maju 15 июнь 2010, в 06:20

0

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

Этот конфликт CSS с прокруткой вверх, чтобы позаботиться об этом

 html, body {
         overflow-x: hidden;        
    }

Ash 15 сен. 2017, в 07:31

0

Если все работает отлично для Mozilla, с html, селектором, то есть хороший шанс, что проблема связана с переполнением, если переполнение в html или body установлено в auto, тогда это приведет к тому, что хром будет не работает хорошо, потому что когда он установлен в auto, свойство scrollTop на анимации не будет работать, я точно не знаю почему! но решение должно опустить переполнение, не устанавливайте его! это решило это для меня! если вы настраиваете его на авто, снимите его!

если вы настроите его на скрытое, тогда выполните, как описано в ответе "user2971963" (ctrl + f, чтобы найти его). надеюсь, это полезно!

Allal Mohamed 19 май 2017, в 11:31

0

У меня тоже была эта проблема, и я написал эту функцию:

/***Working function for ajax loading Start*****************/
function fuweco_loadMoreContent(elmId/*element ID without #*/,ajaxLink/*php file path*/,postParameterObject/*post parameters list as JS object with properties (new Object())*/,tillElementEnd/*point of scroll when must be started loading from AJAX*/){
	var	
		contener = $("#"+elmId),
		contenerJS = document.getElementById(elmId);
	if(contener.length !== 0){
		var	
			elmFullHeight = 
				contener.height()+
				parseInt(contener.css("padding-top").slice(0,-2))+
				parseInt(contener.css("padding-bottom").slice(0,-2)),
			SC_scrollTop = contenerJS.scrollTop,
			SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight;
		if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){
			$("#"+elmId).unbind("scroll");
			$.post(ajaxLink,postParameterObject)
			 .done(function(data){
			 	if(data.length != 0){
					$("#"+elmId).append(data);
					$("#"+elmId).scroll(function (){
						fuweco_reloaderMore(elmId,ajaxLink,postParameterObject);
					});
				}
			 });
		}
	}
}
/***Working function for ajax loading End*******************/
/***Sample function Start***********************************/
function reloaderMore(elementId) {
	var
		contener = $("#"+elementId),
		contenerJS = document.getElementById(elementId)
	;

    if(contener.length !== 0){
    	var
			elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))),
			SC_scrollTop = contenerJS.scrollTop,
			SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight
		;
		if(SC_scrollTop >= SC_max_scrollHeight - 200){
			$("#"+elementId).unbind("scroll");
			$("#"+elementId).append('<div id="elm1" style="margin-bottom:15px;"><h1>Was loaded</h1><p>Some text for content. Some text for content. Some text for content.	Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content.</p></div>');
			$("#"+elementId).delay(300).scroll(function (){reloaderMore(elementId);});
		}
    }
}
/***Sample function End*************************************/
/***Sample function Use Start*******************************/
$(document).ready(function(){
	$("#t1").scrollTop(0).scroll(function (){
		reloaderMore("t1");
    });
});
/***Sample function Use End*********************************/

.reloader {
    border: solid 1px red;
    overflow: auto;
    overflow-x: hidden;
    min-height: 400px;
    max-height: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 400px;
    width: 400px;
}

<script src="/jquery.min.js"></script>
	<div class="reloader" id="t1">
		<div id="elm1" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>
		<div id="elm2" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>
		<div id="elm3" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>		
	</div>

Я надеюсь, что это будет полезно для других программистов.

Vladimir A. 28 июль 2016, в 10:04

0

Тестирование в Chrome, Firefox и Edge, единственное решение, которое отлично подходит для меня, - это использование setTimeout с решением Aaron таким образом:

setTimeout( function () {
    $('body, html').stop().animate({ scrollTop: 0 }, 100);
}, 500);

Ни одно из других решений не перезапустило предыдущий scrollTop, когда я перезагрузил страницу, в Chrome и Edge для меня. К сожалению, в Edge по-прежнему немного "щелчок".

Ale 30 июнь 2016, в 10:49

0

Лучший способ решить эту проблему - использовать такую функцию:

function scrollToTop(callback, q) {

    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, function() {
            console.log('html scroll');
            callback(q)
        });
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, function() {
            console.log('body scroll');
            callback(q)
        });
        return;
    }

    callback(q);
}

Это будет работать во всех браузерах и не позволит FireFox дважды прокручиваться (что происходит, если вы используете принятый ответ - $("html,body").animate({ scrollTop: 0 }, "slow");).

Chuck Le Butt 10 март 2016, в 13:51

0

// if we are not already in top then see if browser needs html or body as selector
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body';

// then proper delegate using on, with following line:
$(obj).animate({ scrollTop: 0 }, "slow");

НО, лучший подход - прокрутить идентификатор в вашем окне просмотра, используя только собственный api (поскольку вы все равно прокручиваете вверх, это может быть только ваш внешний div):

document.getElementById('wrapperIDhere').scrollIntoView(true);

Maar10 27 сен. 2012, в 21:14

0

Этот лучший подход позволяет обойти проблему с overflow-x: hidden; на html в хром. Однако он не сглаживает прокрутку, как .animate() .
Jimmy 05 сен. 2016, в 16:22

0

Я не думаю, что scrollTop является допустимым свойством. Если вы хотите оживить прокрутку, попробуйте плагин scrollTo для jquery

http://plugins.jquery.com/project/ScrollTo

Ben Rowe 15 июнь 2010, в 05:50

2

scrollTop () является действительным jQuery: api.jquery.com/scrolltop
Bayard Randel 15 июнь 2010, в 05:22
0

@Bayard - LOL! это метод, а не свойство css ...
Reigel 15 июнь 2010, в 05:26
0

Когда я сказал, что scrollTop () является свойством? Вам не нужно использовать плагин, так как эта функция уже реализована в jQuery.
Bayard Randel 15 июнь 2010, в 05:32
0

@Bayan - ваш удаленный ответ будет иметь ответ. When did I say scrollTop() is a property? и кроме того, OP хочет плавную анимацию, может ли scrollTop() делать сглаживание? ... и стоит отметить, что ответ Бена четко сформулирован, I don't think the scrollTop is a valid property и вы прокомментировали как scrollTop() is valid jQuery ...
Reigel 15 июнь 2010, в 05:46
0

спасибо @Ben Rowe, но я не хочу использовать дополнительные плагины.
Maju 15 июнь 2010, в 06:13
1

@ Мажу достаточно честно. Рад видеть, что ваша проблема уже решена :)
Ben Rowe 16 июнь 2010, в 01:19
0

@Reigel ScrollTop ScrollTop сглаживает: jsfiddle.net/JohnnyWalkerDesign/w4hetv45
Chuck Le Butt 10 март 2016, в 12:30

Показать ещё 5 комментариев

Ещё вопросы

jsbin.com/erade/2 отлично работает на Chrome
@jAndy, мне было интересно, почему scrollTop , который не является допустимым свойством css, работает в вашей демоверсии? ... Вы можете поделиться какой-нибудь информацией или ссылкой на нее?
@ Рейгель: Я должен признать, я не могу. Я использую его почти как черный ящик, но jQuery Infacts нормализует его.
@jAndy - хорошо ... но я думаю, было бы нецелесообразно использовать scrollTop в свойствах анимированной CSS-карты ... Я все еще копаю ...
Возможно дублирование scrolltop с анимацией не работает
это может быть более 4 лет, но это все еще было решением моей проблемы
@ Leandro, это решение в Chrome 41. Не отчаивайтесь ответом, который отвечает на вопрос.
@Leandro Этот парень только что спас мне жизнь! это сработало для меня
Боже мой, это решило две проблемы для меня. Большое спасибо <3
Вы просто сэкономили мне много времени, спасибо.
Это работает, но не при использовании animate()
Документ работал для меня, когда «html» и «body» не работали. Спасибо :)
это работает для меня, спасибо. это хорошее решение
Вот это да. Это полностью исправило мою проблему! Я не мог заставить scrollTop работать вообще, но как только я удалил высоту: 100% от тела и HTML-элемента, он работал отлично. Спасибо Спасибо спасибо.
@ agon024, я тоже счастлив;). На самом деле я нашел это решение после нескольких часов тестирования и попытался написать здесь для кого-то вроде вас.
Хорошая работа! Мне очень помогли!
Тем не менее анимация не работает. Нашел простое решение. Мне пришлось использовать «body, html» или «html, body» вместо просто «html».
Этот лучший подход позволяет обойти проблему с overflow-x: hidden; на html в хром. Однако он не сглаживает прокрутку, как .animate() .
scrollTop () является действительным jQuery: api.jquery.com/scrolltop
@Bayard - LOL! это метод, а не свойство css ...
Когда я сказал, что scrollTop () является свойством? Вам не нужно использовать плагин, так как эта функция уже реализована в jQuery.
@Bayan - ваш удаленный ответ будет иметь ответ. When did I say scrollTop() is a property? и кроме того, OP хочет плавную анимацию, может ли scrollTop() делать сглаживание? ... и стоит отметить, что ответ Бена четко сформулирован, I don't think the scrollTop is a valid property и вы прокомментировали как scrollTop() is valid jQuery ...
спасибо @Ben Rowe, но я не хочу использовать дополнительные плагины.
@ Мажу достаточно честно. Рад видеть, что ваша проблема уже решена :)
@Reigel ScrollTop ScrollTop сглаживает: jsfiddle.net/JohnnyWalkerDesign/w4hetv45

Aaron Harun · Accepted Answer · 2010-06-15T07-33-00.000Z

85

Лучший ответ

Попробуйте использовать $("html,body").animate({ scrollTop: 0 }, "slow");

Это работает для меня в хроме.

Aaron Harun 15 июнь 2010, в 07:33

0

Да. Спасибо. Простой и экономящий время.
Maju 15 июнь 2010, в 06:19
0

У меня была точно такая же проблема, хотя я также анимировал scrollTop. Интересно то, что $ ("html") работает в FF, а $ ("body") работает в Chrome / Safari, но только $ ("html, body") работает для меня в обоих.
Bryan Agee 11 май 2011, в 20:49
0

Спасибо у меня работает
Tech4Wilco 25 окт. 2011, в 12:16
3

Это имеет побочный эффект: функция обратного вызова будет вызываться дважды (один раз для каждого элемента). Любой умный обходной путь для этого, кто-нибудь?
bububaba 19 март 2012, в 08:19
8

Поместите: if (this.nodeName == "BODY") {return; } в начале вашей функции обратного вызова, так что будет проходить только обратный вызов из элемента html. Также помните, что атрибут nodeName в html-элементах всегда в верхнем регистре.
Bobby 15 авг. 2012, в 17:26
0

Все еще не работает для меня.
techie_28 12 сен. 2012, в 07:26
1

Спасибо @Bobby за указание на это! Чрезвычайно полезно при использовании функции обратного вызова, которая должна запускаться один раз и работать во всех браузерах! TA!
Sebastian 12 апр. 2013, в 17:54
0

Плохая сторона этого в том, что в Firefox метод обратного вызова animate будет вызван дважды. Один раз для тела, а затем для HTML: /
Aamir Afridi 10 май 2013, в 16:23
1

Мне пришлось использовать $ ("body, html") для работы во всех браузерах.
Tom Kincaid 12 июль 2017, в 15:58
0

Извините, но я не могу заставить его работать в Chrome, я просто хочу скорость при прокрутке, больше ничего не выполняю, поэтому я просто поставил jQuery.scrollSpeed(100, 800); когда «документ готов», что я должен сделать для работы с chorme? Спасибо
Albert Català 24 июль 2017, в 12:57
0

Просто чтобы добавить, чем у меня есть прокрутка на div внутри тела, а не в теле
Albert Català 24 июль 2017, в 13:25

Показать ещё 9 комментариев