页面加载完毕后滚动条自动滚动一定位置
更新时间：2014年02月20日 10:50:15 作者：
希望页面加载完毕后向左自动滚动一定位置，下面有个不错的方法可以轻松帮大家实现下
昨天有一需求，是希望页面加载完毕后向左自动滚动一定位置。
一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效，结果失望了~
今天抽空一查，才发现：
使用document.documentElement.scrollLeft 设置值，必须在人为事件触发下才生效；
想要页面加载完毕时自动滚动一定距离，则使用jquery的animate，如下面例子：
$("html,body").animate({"scrollLeft": "300px"}, 1000);
$("html,body").animate({"scrollTop": "300px"}, 1000);
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>自动滚动</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript" src="https://www.gamebox.com/js/jquery.js"></script>
</head>
<body>
<!-- container start -->
<div class="container" style="height: 3000px; width: 3000px;">
<a class="btn" href="javascript:;">点击</a>
</div>
<!-- container end -->
<script type="text/javascript">
/*window.onload = function(){
window.scroll(0,300);
$(".btn").on("click", function(){
document.documentElement.scrollLeft = "500";
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
var oLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
alert(oLeft);
});
}*/
$(function(){
$("html,body").animate({"scrollLeft": "300px"}, 1000);
});
</script>
</body>
</html>
一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效，结果失望了~
今天抽空一查，才发现：
使用document.documentElement.scrollLeft 设置值，必须在人为事件触发下才生效；
想要页面加载完毕时自动滚动一定距离，则使用jquery的animate，如下面例子：
$("html,body").animate({"scrollLeft": "300px"}, 1000);
$("html,body").animate({"scrollTop": "300px"}, 1000);
demo:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>自动滚动</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript" src="https://www.gamebox.com/js/jquery.js"></script>
</head>
<body>
<!-- container start -->
<div class="container" style="height: 3000px; width: 3000px;">
<a class="btn" href="javascript:;">点击</a>
</div>
<!-- container end -->
<script type="text/javascript">
/*window.onload = function(){
window.scroll(0,300);
$(".btn").on("click", function(){
document.documentElement.scrollLeft = "500";
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
var oLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
alert(oLeft);
});
}*/
$(function(){
$("html,body").animate({"scrollLeft": "300px"}, 1000);
});
</script>
</body>
</html>
相关文章
这篇文章主要介绍了JavaScript遍历对象的七种方法汇总，文章通过从属性可枚举性问题与遍历方法两个大方面讲述全文，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了JavaScript中html画布的使用与页面存储技术,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
这篇文章主要介绍了arcgis.js控制地图地体的显示范围超出区域自动弹回，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
JS隐藏参数post传值实例，需要的朋友可以参考一下2013-04-04
这篇文章主要给大家介绍了关于echarts横向柱状图简单实现的相关资料,ECharts是百度前端开发部开发的一个开源可视化库,它可以帮助开发者轻松的实现各种数据可视化,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
js 异步处理进度条的实现代码，需要的朋友可以参考下。2010-04-04
这篇文章主要介绍了JavaScript禁止用户多次提交的两种方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JavaScript DOM常用操作代码汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了javascript原型模式用法,以实例形式较为详细的分析了javascript原型模式的原理与使用技巧,需要的朋友可以参考下2015-06-06
gulpjs是一个前端构建工具,gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快,有兴趣的可以了解一下。2017-01-01
最新评论