JQuery 页面滚动动画仅适用于镶边
JQuery page scroll animation only works in chrome
我有以下两个html文件。当您单击第一页(a.html(中的链接时,它将打开第二页(b.html(并向下滚动到相关位置。我在滚动中添加了一个 JQuery 动画。这在chrome中完美运行,但在其他浏览器(如Firefox和IE(中则不然。
答.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="b.html#elementID">Jump</a>
</body>
</html>
乙.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 1000)
}, 0);
}
else {
$('html, body').show();
}
});
</script>
</head>
<body>
<div style="margin-top:4000px" id="elementID">AAAAAAAAAAAAA</div>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
<h1>AAAAAAA</h1>
</body>
</html>
默认情况下,Firefox 强制浏览器转到哈希标签的位置。 您需要在页面加载时重置scrollTop
然后制作如下动画:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').prop('scrollTop',0).animate({
scrollTop: $(window.location.hash).offset().top
}, 1000)
}, 0);
}
else {
$('html, body').show();
}
});
试试这个。您必须在页面加载数据后滚动。
if (window.location.hash) {
$('html, body').show();
$('html, body').animate({ scrollTop: $('html, body')[0].scrollHeight }, 1000);
}
相关文章:
- AddEventListener适用于浏览器,但不适用于Android
- 查找仅适用于原始图像的图像放大算法的名称
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- Web编程,简单但适用于机器人项目
- JavaScript不适用于internet explorer和Firefox,但适用于谷歌
- Jquery事件处理程序仅适用于匿名函数
- jQuery调整大小函数只适用于窗口
- 火灾在卸载前确认警报仅适用于外部站点
- EmberJS-适用于各种模型的适配器动态名称空间
- Facebook共享链接适用于用户,但不适用于粉丝页面管理员
- jQuery-适用于移动设备的多级菜单
- 循环中的切换脚本只适用于第一次迭代
- HTML-SVG文件动画不适用于主机,但适用于本地
- 使用 JavaScript 触发 CSS 动画淡入和淡出 - 仅适用于一个方向
- JQuery 页面滚动动画仅适用于镶边
- 适用于浏览器的红心坠落动画
- Javascript mouseover/mouseout动画仅适用于第一次迭代
- 为什么我的多个画布动画(requestAnimationFrame)只适用于一个元素
- Jquery动画仅适用于一个元素
- 动画滚动锚只适用于第一个链接