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


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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 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
ThinkPHP缓存方法S()概述
2014/06/13 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
List the Codec Files on a Computer
2007/06/18 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
python3生成随机数实例
2014/10/20 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
交通专业个人自荐信格式
2013/09/23 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
初中作文评语大全
2014/04/23 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
英文商务邀请函范文
2015/01/31 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL