Question

我正在尝试滚动到滚动DIV中的特定位置。现在我使用jQuery scrollTop（）函数的像素偏移量，它在桌面浏览器上运行良好，但除了谷歌的Chrome Android浏览器之外它在Android手机浏览器上不起作用（没有iOS设备来测试它是否有效）。我找到的所有解决方案都是用于页面（窗口）滚动而不是用于在DIV中滚动，任何人都有任何关于我可以用来完成相同任务的建议吗？

以下是一个例子：
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

我在桌面浏览器中尝试过的其他功能：

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

编辑3/11/13：

这是一个知道Android浏览器问题：https://code.google.com/p/android/issues/detail?id=19625

错误报告中的一位用户提出了一种解决方法：

因为溢出属性似乎只出现问题设置为滚动，您可以先将其设置为“隐藏”，然后设置scrollTop 属性，然后将其重置为“滚动”（或自动）。 scrollTop 当元素重新渲染时，属性似乎很荣幸滚动条。目前尚不清楚这是否有任何意想不到的副作用，但“它可以在我的机器上运行！”

Answer 1

这对我有用：

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );

Answer 2

一个对我有用的工作：首先，暂时将overflow属性设置为'hidden'，然后设置scrollTop属性，然后将overflow属性设置回'scroll'（或auto）。当overflow属性设置回'scroll'时，scrollTop值似乎保持不变并且很荣幸。这是一个非常简单的解决方法，适用于我测试的所有浏览器（桌面和移动）。我没有详尽地测试它，我没有测试转换到位，所以可能有我没有遇到的副作用...你的里程可能会有所不同 - 但这是一件容易的尝试。

Answer 3

我在这里找到了答案http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

手机不了解$('html,body')所以你可以为手机做以下事情

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    window.scrollTo(0)
} else {
    // default `$('html,body')` code for scrolling
}

或

只需使用$('body')代替$('html, body')。

Answer 4

你试过这个吗？

$("html").scrollTop(0);

Answer 5

根据@Allan Nienhuis的回答，暂时将overflow属性设置为'隐藏'，对Android 4.0.3不起作用（例如，什么是Kindle Fire 2s）正在运行） - 当您将overflow设置回scroll时，元素会滚动回到顶部。

备选方案：

通过帮助函数滚动自己的滚动，如所示here - 虽然这很容易实现，但它不会让你惯性滚动或过度滚动。
使用iScroll这样的库，它基于CSS转换实现自己的，复杂的滚动（惯性，过度滚动）。

使用iScroll需要一些设置，但是：你需要一个具有固定高度和样式div的包装 overflow: hidden，并且要滚动的元素应该否 overflow风格。 This jsFiddle demo显示了它是如何完成的。

Answer 6

我可以在Galaxy Tab上滚动到页面顶部的唯一方法是在滚动时将页面body隐藏100ms。使用jQuery：

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);

Answer 7

我有几个解决方案供您尝试。你必须自己测试它们，因为我之前没有在移动浏览器中试过它们，但它们是：

使用jQuery的.css()方法（或.animate()取决于我们最终的目标）来调整上边距（注意：您必须将溢出更改为隐藏并将文本包装在内部div，这是你要调整的边缘元素）
执行与第一个解决方案相同的操作，除了将嵌入div的位置设置为relative并调整它的top属性。

如果您有任何疑问，请与我联系。祝好运！：）

请注意，虽然我没有在基于CSS标准而不是jQuery函数之前在移动设备中测试这些，但它们应该可以工作。

Answer 8

尝试使用jQuery的.animate方法：

$('.div').animate({ scrollTo: x; });

其中x等于想要滚动到顶部的div的位置。

Answer 9

jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});

<a href="#top" class="scroll"></a>

Answer 10

使用以下代码：

$("body").animate( { scrollTop: 50,  },  800,  function(){
    $("body").clearQueue();
} );

Answer 11

我建议不要在您的顶级DOM元素（如#top）上设置ID，而只需使用：

，而不要使用scroll，scrollTo或scrollTop方法（这会给我带来移动问题）

document.getElementById("top").scrollIntoView();

到目前为止，在所有设备和浏览器上，最适合我的情况。

Answer 12

这些解决方案对我不起作用。我知道有人提到了移动检测，但是他们的方法对我不起作用。终于让我想到了使用移动检测为每种情况提供两种不同的CSS样式。也许不是理想的，但是可以肯定的。上面建议的使用js临时更改样式对我也不起作用。

我有一个具有独立滚动div的两列布局，每个div都设置为overflow：scroll，而正文必须设置为overflow：hidden。我需要在其中一列上使用scrollTop，而没有解决方案。

我使用了wp_is_mobile（）（Wordpress函数），如果mobile为true，则溢出：隐藏已从 body 中删除，并且带有overflow：scroll的div已将css删除了。最后，scrollTop在移动设备上工作。

Answer 13

我遇到了同样的问题，并使用jquery .offset()来解决它。

http://api.jquery.com/offset/

$('#yourFineElement').offset({ top: X, left Y)});

jQuery scrollTop（）无法在移动浏览器上滚动DIV，替代方案？

13 个答案: