页面加载完毕后滚动条自动滚动一定位置
更新时间：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运行机制之Event Loop，在学习Event Loop前，首先需要了解的几个概念Javascript是单线程、任务队列、同步任务、异步任务、Javascript执行栈，下面来看看文章的详细介绍吧2021-12-12
这篇文章主要介绍了JavaScript数据结构之二叉树的计数算法,结合具体实例形式分析了javascript二叉树记录更新次数的原理与操作技巧,需要的朋友可以参考下2017-04-04
本文主要对实现一个简单的js加载器的步骤进行介绍--主要可以分为解析路径、下载模块、解析模块依赖、解析模块四个步骤。需要的朋友来看下吧2016-12-12
video控件是微信小程序提供的系统组件之一,用于实现播放视频的功能,这篇文章主要给大家介绍了关于微信小程序之video组件视频播放的相关资料,需要的朋友可以参考下2022-04-04
本篇文章主要是对Javascript遍历页面text控件进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了微信小程序表单验证功能,结合完整实例形式分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了javascript弹出页面回传值的方法,实例分析了由a1.html弹出的b1.html回传值的实现方法,非常具有实用价值,需要的朋友可以参考下2015-01-01
javascript在网页中的运用实现，需要的朋友可以参考下。2009-11-11
很多框架存在父子关系，操作起来十分麻烦，很多同学经常出现这样悲催的代码2011-10-10
本文主要介绍了JS仿JQuery选择器功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论