jQuery scrollTop在Chrome中不起作用，但在Firefox中起作用

80

我使用scrollTopjQuery中的函数导航到顶部，但是奇怪的是，在进行了一些更改后，“平滑动画滚动”在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;*/
}
jquery  jquery-ui  jquery-selectors 
— 麻菊
source
1
jsbin.com/erade/2在chrome上正常工作
— jAndy 2010年
@jAndy，我想知道为什么scrollTop不是有效的CSS属性的东西可以在您的演示中使用？...您可以共享一些信息或链接吗？
— Reigel 2010年
@Reigel：我必须承认，我不能。我几乎像黑盒一样使用它，但是jQuery实际上将其跨浏览器标准化。
— jAndy 2010年
@jAndy-好的...但是我不建议scrollTop在动画css地图属性中使用它...我仍然在挖掘..
— Reigel 2010年
— Mister Q

Answers:

106

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

这适用于Chrome。

— 亚伦·哈伦
source
是的，谢谢。简单又省时。
— Maju 2010年
3
这有一个副作用：回调函数将被调用两次（每个元素一次）。有什么明智的解决方法吗？
— bububaba 2012年
8
输入：if（this.nodeName ==“ BODY”）{return; }放在回调函数的开头，因此只有html元素的回调会通过。另外，请记住，html元素上的nodeName属性始终为大写。
— 鲍比
1
感谢@Bobby指出这一点！当使用一种回调函数（一次应触发一次并在所有浏览器上运行）时非常有用！TA！
— 塞巴斯蒂安
1
我必须使用$（“ body，html”）在所有浏览器中工作。
— 汤姆·金凯德
57

如果您的CSShtml元素具有以下overflow标记，scrollTop则将不起作用。

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

要允许scrollTop滚动，请修改您的标记，然后overflow从html元素中删除标记并附加到body元素。 

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}
— 用户2971963
source
4
它可能已有4年以上的历史了，但这仍然是解决我的问题的方法
— Rafael Rotelok 2015年
1
@Leandro，这是Chrome 41中的解决方案。不要阻止回答该问题的答案。
— worc 2015年
1
@Leandro这个家伙救了我的命！它对我
— 有用
哦，天哪，这为我解决了两个问题。非常感谢<3
— Osamah Aldoaiss '16
我...花了5个多小时试图弄清楚为什么它不起作用。非常感谢你做的这些！
— PepperAddict
15

如果将scrollTop（）与'document'一起使用，则在两种浏览器中都可以使用：

$(document).scrollTop();

...而不是'html'或'body'。否则，它将无法在两种浏览器中同时运行。

— 亚历杭德罗·德尔里奥
source
当'html'和'body'不起作用时，文档对我有用。谢谢:)
— ConorLuddy 2014年
5

我已经在Chrome，Firefox和Safari中成功使用了此功能。尚未能够在IE中对其进行测试。

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

使用“ if”语句的原因是要检查用户是否已准备就绪，位于网站顶部。如果是这样，请不要执行动画。这样，我们不必担心屏幕分辨率。

我使用$(document).scrollTop而不是ie的原因。$('html,body')是因为Chrome出于某种原因总是返回0。

— 史蒂文
source
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
source
不错的工作！对我有很大帮助！
— gogachinchaladze
2

我在chrome浏览时遇到了同样的问题。所以我从样式文件中删除了这行代码。

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

现在我可以玩滚动了，它可以工作： 

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");
— 内存
source
哇。这完全解决了我的问题！我根本无法使scrollTop正常工作，但是一旦我删除了height：从body和html元素中获取100％的效果就很好了。谢谢你，谢谢你，谢谢你。
— agon024'9
@ agon024，我也很高兴;）。确实，经过几个小时的测试，我建立了这个解决方案，然后尝试在这里为像您这样的人写信。
— 2016年
1

也许你是说 top: 0

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

来自动画文档

.animate（properties，[duration]，[easing]，[callback]）
properties动画将朝其移动的CSS属性的映射。
...

还是$(window).scrollTop()？

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});
— 雷格尔
source
动画仍然无法正常工作。找到了简单的解决方案。我不得不使用“ body，html”或“ html，body”，而不仅仅是“ html”。
— Maju 2010年
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将id滚动到视口中（因为无论如何滚动到顶部，这都可以是外部div）：

document.getElementById('wrapperIDhere').scrollIntoView(true);
— Maar10
source
这最好的办法绕过这个问题overflow-x: hidden;上html的铬。但是它不能像平滑滚动一样.animate()。
— 吉米
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");）。

— 查克·勒·巴特
source
0

在Chrome，Firefox和Edge上进行测试，唯一适合我的解决方案是以这种方式将setTimeout与Aaron的解决方案结合使用：

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

当我重新加载页面时，没有其他解决方案可以在Chrome和Edge中为我重置上一个scrollTop。不幸的是，Edge中仍然有一些“轻拂”。

— 艾尔
source
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>
展开摘要

希望对其他程序员有帮助。

— 弗拉基米尔·A。
source
0

如果对于使用html，body选择器的Mozilla来说一切正常，则很有可能是问题与溢出有关，如果html或body中的溢出设置为auto，则这会导致chrome无法正常工作，原因是将其设置为auto时，animate上的scrollTop属性将不起作用，我不知道为什么！但是解决方案是忽略溢出，请勿设置！为我解决了！如果您将其设置为自动，请将其关闭！

如果将其设置为隐藏，则按照“ user2971963”答案中的说明进行操作（按ctrl + f进行查找）。希望这是有用的！

— 穆罕默德·阿拉（Mohamed Allal）
source
-3

我不认为scrollTop是有效的属性。如果要动画化滚动，请尝试使用jquery的scrollTo插件

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

— 本·罗
source
我什么时候说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...
— Reigel 2010年
1
@Maju足够公平。很高兴看到您的问题得到了解决:)
— Ben Rowe 2010年
@ReigelScrollTop确实可以顺利运行：jsfiddle.net/JohnnyWalkerDesign/w4hetv45
— Chuck Le Butt
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.