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

Я использовал функцию 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;*/
}

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

$(document).scrollTop();

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

Ответ 4

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

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

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

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

Ответ 5

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

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, потому что используется только одна анимация, а не две. Таким образом, срабатывает только один обратный вызов, а не два.

Ответ 6

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

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

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

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

Ответ 7

может быть, вы имеете в виду 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;
});

Ответ 8

Я использую:

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

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

Ответ 9

// 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);

Ответ 10

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

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");).

Ответ 11

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

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

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

Ответ 12

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

/***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="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/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>

Ответ 13

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

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

Ответ 14

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

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

 html, body {
         overflow-x: hidden;        
    }

Ответ 15

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

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