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


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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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与MySQL交互使用详解
2006/10/09 PHP
PHP的FTP学习(三)
2006/10/09 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
Python单链表的简单实现方法
2014/09/23 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
法律专业自荐信
2014/06/03 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
成本会计实训报告
2014/11/05 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
国王的演讲观后感
2015/06/03 职场文书
2016猴年春节问候语
2015/11/11 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
python使用BeautifulSoup 解析HTML
2022/04/24 Python
nginx 配置指令之location使用详解
2022/05/25 Servers