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


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实现下载远程文件并保存在本地的脚本
May 06 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
JS画5角星方法介绍
Sep 17 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
浅谈react路由传参的几种方式
Mar 23 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/10/03 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
以一段代码为实例快速入门Python2.7
2015/03/31 Python
整理Python中的赋值运算符
2015/05/13 Python
python中zip和unzip数据的方法
2015/05/27 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python中存取文件的4种不同操作
2018/07/02 Python
python实现多层感知器
2019/01/18 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
生产主管岗位职责
2013/11/10 职场文书
秘书岗位职责
2013/11/18 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
艺术节开幕词
2015/01/28 职场文书
中学音乐课教学反思
2016/02/18 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL