it-swarm.com.ru

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;*/
}
76
Maju

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

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

99
Aaron Harun

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

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

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

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

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

$(document).scrollTop();

... вместо «HTML» или «тело». В противном случае он не будет работать одновременно в обоих браузерах.

14
Alejandro del Río

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

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

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

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

5
Steven

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

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

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

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

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

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
NVI

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

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

от одушевленные документы

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

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

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

Я использую:

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

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

1
Aamir Afridi
// 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
Maar10

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

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

0
Mohamed Allal

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

/***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
Vladimir A.

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

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
Chuck Le Butt

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

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

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

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

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

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