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


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 相关文章推荐
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
浅谈javascript中return语句
Jul 15 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
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实现登陆验证码(类似条行码状)
2006/10/09 PHP
多重?l件?合查?(二)
2006/10/09 PHP
基于empty函数的判断详解
2013/06/17 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python语法分析之字符串格式化
2019/06/13 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Nginx反向代理学习实例教程
2021/10/24 Servers