页面加载完毕后滚动条自动滚动一定位置


Posted in Javascript onFebruary 20, 2014

昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置。

一直以为只要给页面的 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 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JS解析XML实例分析
Jan 30 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 #Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 #Javascript
js获取指定的cookie的具体实现
Feb 20 #Javascript
js获取和设置属性的方法
Feb 20 #Javascript
js控制浏览器全屏示例代码
Feb 20 #Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 #Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 #Javascript
You might like
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php xml 入门学习资料
2011/01/01 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php中使用url传递数组的方法
2015/02/11 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python中bisect的用法及示例详解
2020/07/20 Python
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
七匹狼男装广告词
2014/03/21 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
公路绿化方案
2014/05/12 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
楚门的世界观后感
2015/06/03 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Python基础学习之奇异的GUI对话框
2021/05/27 Python