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


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判断IE版本的代码 超管用!
Aug 09 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
详解JS中的attribute属性
Apr 25 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 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
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python中turtle库的使用实例
2019/09/09 Python
np.dot()函数的用法详解
2020/01/17 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
机电工程专业应届生求职信
2013/10/03 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
经济担保书范文
2014/04/02 职场文书
合作意向协议书
2015/01/29 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle