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


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实现显示当前状态的导航效果代码
Aug 28 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
Three.js快速入门教程
Sep 09 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
PHP书写格式详解(必看)
2016/05/23 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP 实现重载
2021/03/09 PHP
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
js倒计时显示实例
2016/12/11 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
django url到views参数传递的实例
2019/07/19 Python
python中p-value的实现方式
2019/12/16 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
教师找工作推荐信
2013/11/23 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015入党自传书范文
2015/06/26 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
mysql序号rownum行号实现方式
2022/12/24 MySQL