Javascript 在android中单击jquery滚动到div顶部
我有一个不同的带溢出设置的滚动和按钮，当点击会滚动回到顶部Javascript 在android中单击jquery滚动到div顶部,javascript,jquery,html,css,scroll,Javascript,Jquery,Html,Css,Scroll,我有一个不同的带溢出设置的滚动和按钮，当点击会滚动回到顶部 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="htt
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style>
.pages{
position:absolute;
top:30px;
bottom:0px;
left:0px;
right:0px;
border:0;
overflow:scroll;
}
.pages div{
position:relative;
width:100%;
height:300px;
border:solid 1px #CDCDCD;
border-top-style:none;
border-left-style:none;
border-right-style:none;
}
</style>
<script>
$(document).ready(function(e) {
$('#new_pages').click(function(event){
event.preventDefault();
//add new page data
//scroll to top
$('#mag_pages').animate({
scrollTop:0
},900);
});
});
</script>
</head>
<body>
<div class="new_pages" id="new_pages">
<div id="count">10+</div>
<div id="text">New Pages</div>
</div>
<div class="pages" id="mag_pages">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
</div>
</body>
</html>
.页{
位置：绝对位置；
顶部：30px；
底部：0px；
左：0px；
右：0px；
边界：0；
溢出：滚动；
}
.pages分区{
位置：相对位置；
宽度：100%；
高度：300px；
边框：实心1px#CDCDCD；
边框顶部样式：无；
左边框样式：无；
右边框样式：无；
}
$（文档）.ready（函数（e）{
$（“#新建页面”）。单击（函数（事件）{
event.preventDefault（）；
//添加新页面数据
//滚动到顶部
$（“#杂志页面”）。设置动画({
滚动顶部：0
},900);
});
});
10+
新页面
第1页
第2页
第3页
第4页
第5页
手机必须有不同的目标吗？我在我的一个项目中使用了这样的代码，它可以工作，请尝试修改您的代码，如下所示：
$(document).ready(function(e) {
$('#new_pages').click(function(event){
event.preventDefault();
//add new page data
//scroll to top
$('html, body').animate({
scrollTop:$('#mag_pages').offset().top
},900);
});
});
也许JQuery滚动或动画功能在移动设备中存在一些问题 尝试使用纯JS，而不是JQuery：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style>
.pages{
position:absolute;
top:30px;
bottom:0px;
left:0px;
right:0px;
border:0;
overflow:scroll;
}
.pages div{
position:relative;
width:100%;
height:300px;
border:solid 1px #CDCDCD;
border-top-style:none;
border-left-style:none;
border-right-style:none;
}
</style>
<script>
function newPagesClicked(){
//add new page data
//scroll to top
scrollToTop
}
function scrollToTop(scrollDuration) {
var scrollStep = -window.scrollY / (scrollDuration / 15),
scrollInterval = setInterval(function(){
if ( window.scrollY != 0 ) {
window.scrollBy( 0, scrollStep );
}
else clearInterval(scrollInterval);
},15);
}
</script>
</head>
<body>
<div class="new_pages" onclick="newPagesClicked()" id="new_pages">
<div id="count">10+</div>
<div id="text">New Pages</div>
</div>
<div class="pages" id="mag_pages">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
</div>
</body>
</html>
.页{
位置：绝对位置；
顶部：30px；
底部：0px；
左：0px；
右：0px；
边界：0；
溢出：滚动；
}
.pages分区{
位置：相对位置；
宽度：100%；
高度：300px；
边框：实心1px#CDCDCD；
边框顶部样式：无；
左边框样式：无；
右边框样式：无；
}
函数newpageslicked（）{
//添加新页面数据
//滚动到顶部
滚动托普
}
函数scrollToTop（滚动持续时间）{
var scrollStep=-window.scrollY/（scrollDuration/15），
scrollInterval=setInterval（函数（）{
如果（window.scrollY！=0）{
scrollBy（0，scrollStep）；
}
else clearInterval（滚动间隔）；
},15);
}
10+
新页面
第1页
第2页
第3页
第4页
第5页