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;*/
}
72
jquery jquery-selectors jquery-ui

15 ответов

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

это работает для меня в Chrome.

95

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

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

разрешить scrollTop для прокрутки измените разметку remove overflow код html элемент и добавить к body элемент. 

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

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

$(document).scrollTop();

...вместо "html" или "body". Иначе он не будет работать одновременно в обоих браузерах.

14

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

2

у меня была такая же проблема с прокруткой в Chrome. Так что я удалены это строки кодов из моего файла стиля.

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

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

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

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

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

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

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

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

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});
1
// 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);
1

Я использую:

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

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

1

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

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

0

тестирование на Chrome, Firefox и Edge, единственное решение, которое отлично работало для меня, использует setTimeout с решением Аарона таким образом:

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

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

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="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>

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

0

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

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

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

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

 html, body {
         overflow-x: hidden;        
    }
0

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

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

-1