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


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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
Angular7.2.7路由使用初体验
Mar 01 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
3.从实例开始
2006/10/09 PHP
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python调用摄像头的示例代码
2020/09/28 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
初一生物教学反思
2014/01/18 职场文书
秘书英文求职信
2014/04/16 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书